javascript - 在 ReactJS 中每次重新渲染时获取一个新的 FabricJS-Canvas

Question

我有以下代码，其中我通过 Prop 获得了名称列表。 对于每个元素，我都创建一个 Fabric.IText。

问题:我的页面就像一个待办事项列表。因此，当我添加待办事项时，FabricCanvas 组件正在重新渲染。每次发生这种情况时，我都会在旧 Canvas 上添加新 Canvas 。

我尝试在componentDidMount和componentWillMount中初始化fabric.Canvas，但这两个版本都不起作用。

我正在使用选项卡，因此当我更改选项卡然后再改回来时，我会再次获得一个新的 Canvas 。

-->

import React from 'react';
import fabric from 'fabric';

var canvas;

var FabricCanvas = React.createClass({
 getInitialState: function(){
 return{
  elements: this.props.elements
 };
},

initiateWidgets: function(){
 canvas = new fabric.Canvas("FabCan");

for (var key in this.state.elements){
  var temp = new fabric.IText(this.state.elements[key]);
  canvas.add(temp);
},

render: function(){
 this.initiateWidgets();
  return(
    <canvas id="FabCan"> </canvas>
  );
 }
});

module.exports = FabricCanvas;

Answer 1

您可以使用componentWillReceiveProps

componentWillReceiveProps(newProps){
    do something with newProps
}