ReactJSで再レンダリングするたびに新しいFabricJS-キャンバスを取得

Question

私は私の小道具で名前のリストを取得する私の次のコードを持っています。 すべての要素に対して、私はfabric.itextを作成しています。

問題：マイページはToDoリストのようです。したがって、ToDoを追加すると、FabricCanvasコンポーネントが再レンダリングされます。これが起こるたびに、私は古いキャンバスに新しいキャンバスを入れます。

componentDidMountとcomponentWillMountにfabric.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

あなたはrectJSがそれを提供することをshouldComponentUpdate() mathodを使用しようと、再び同じことをレンダリングするから停止するために探しているならあなたはcomponentWillReceiveProps

componentWillReceiveProps(newProps){ 
    do something with newProps 
} 

Answer 2

を使用することができます。私はそれまでこれを使用していませんが、here'sあなたを助ける良いチュートリアルです。 getInitialState()で小道具を使うのは、反応の悪い習慣です。