反应渲染/更新画布

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 检测道具的变化，然后使用它在画布上绘制。