gpt4 book ai didi

javascript - react 渲染/更新 Canvas

转载 作者:太空宇宙 更新时间:2023-11-04 16:29:53 25 4
gpt4 key购买 nike

我正在学习 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 标签并在状态更改时再次放置它?

最佳答案

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

关于javascript - react 渲染/更新 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39906792/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com