我在我的反应组件中直接使用 Konva API,它运行良好。
我只有一个大问题。
问题是当包含 ref 容器的组件被卸载时,react 应用程序崩溃,说 staging 没有容器了。
我试图在组件卸载时在舞台上调用destroy,它进入该方法但它仍然崩溃。
所以基本上,据我了解,从反应组件中调用舞台上的销毁不会从 DOM 中破坏舞台。
任何人都可以帮助解决这个问题吗?
编辑:添加代码片段
export default class ReactComp extends Component {
renderKonva(container) {
var stage = new Konva.Stage({
container: container,
width: 500,
height: 350
});
var layer = new Konva.Layer();
var rect = new Konva.Rect({
stroke: '#155DA4',
strokeWidth: 2,
fill: '#fff',
width: 190,
height: 190,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 2,
opacity: 0.75,
visible: true
});
layer.add(rect);
stage.add(layer);
}
render() {
return (
<div ref={ref => this.renderKonva(ref)}></div>
)
}
因此,每当卸载此组件时,我都会收到错误消息:“Uncaught Stage 没有容器。需要一个容器。”
另外,我试过在舞台上调用destroy,但我仍然得到同样的错误。此外,即使我在 renderKonva 中创建和销毁舞台,本质上我也不会显示任何内容,因为一旦创建舞台,它就会引发相同的错误。