在ReactJS的每次渲染中獲取新的FabricJS-Canvas

Question

我有我的以下代碼，我通過道具獲取名稱列表。 對於我創建fabric.IText的每個元素。

問題：我的頁面像待辦事項列表。所以當我添加待辦事項時，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

你可以使用componentWillReceiveProps

componentWillReceiveProps(newProps){ 
    do something with newProps 
} 

Answer 2

如果你正在尋找從渲染同樣的事情再次停止嘗試使用shouldComponentUpdate()馬託說rectJS提供它。到目前爲止，我還沒有使用它，但here's是一個很好的教程，可以幫助你。在反應中使用道具與getInitialState()是不好的做法。