首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在ReactJS中每次重新渲染时获取新的FabricJS-Canvas

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

Stack Overflow用户
提问于 2016-10-27 16:41:35
回答 2查看 356关注 0票数 1

我有我的以下代码,其中我得到了我的道具的名字列表。我为每个元素创建了一个fabric.IText。

问题:我的页面就像一个待办事项列表。因此,当我添加一个待办事项时,FabricCanvas组件被重新渲染。每次发生这种情况时,我都会在旧画布中得到一个新画布。

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

我使用的是选项卡,所以当我更改选项卡,然后又改回选项卡时,我又得到了一个新画布。

-->

代码语言:javascript
运行
AI代码解释
复制
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;
EN

回答 2

Stack Overflow用户

发布于 2016-10-27 17:08:50

您可以使用componentWillReceiveProps

代码语言:javascript
运行
AI代码解释
复制
componentWillReceiveProps(newProps){
    do something with newProps
}
票数 0
EN

Stack Overflow用户

发布于 2016-10-27 17:13:10

如果你想停止渲染同样的东西,试着使用rectJS提供的shouldComponentUpdate()方法。到目前为止我还没有用过它,但是here's是一个很好的教程,可以帮助你解决这个问题。在react中使用带有getInitialState()的道具是一种糟糕的做法。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40290052

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档