反映渲染/更新画布

Question

我正在学习反应，我正在尝试渲染画布，并在每次状态发生变化时更新它。

//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>
    );
  }

我的问题是：有没有办法通过道具更新画布？到目前为止我得到了这个：

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

但是在组件被挂载之后不再更新它了吗？或者有没有办法删除canvas标签并在状态发生变化时再次放置？

Answer 1

使用componentWillReceiveProps检测道具中的更改，然后使用它在画布上绘制。