javascript - react 渲染/更新 Canvas

Question

我正在学习 React，我正在尝试从 React 渲染 Canvas ，并在每次状态更改时更新它。

//set initial state
constructor(props) {
    super(props);
    this.state = {
      imgFile: this.props.imgFile,
      show: false
    };
}

//The render canvas
render() {
    return (
      <div className="col-sm-4">
        <canvas ref={(c) => { this.myCanvas = c; }} />
      </div>
    );
  }

我的问题是:有没有办法通过 Prop 更新 Canvas ？到目前为止我得到了这个:

componentDidMount() {
    const origin = this.state.imgFile;
    // canvas area/img calculations
    this.funcForDrawCanvas(origin.path, origin.presition, origin.height, origin.width);
}

但是在组件被挂载之后就不再更新它了，你知道吗？或者有没有办法删除 Canvas 标签并在状态更改时再次放置它？

Answer 1

使用 componentWillReceiveProps 检测 props 的变化，然后使用它在 Canvas 上绘制。