使用React删除和重新创建一个元素

我试图让Chart.js与React.js一起工作，并且我很接近。使用React删除和重新创建一个元素

我有React渲染正确的图形，当我改变状态时，新的图表绘制在另一个图形上。问题在于悬停事件显然留在了canvas上，并且将鼠标移到它上面会闪烁以前制作的图形的所有版本。

这是chart.js之错误，据我所知，和解决的办法是删除canvas元素，并用新的canvas元素替换它。

所以我有这样的代码，它获取网页上的图形：

var LineChart = React.createClass({ 
    render: function() { 
    return (
     <div id="lineHolder" className="graphHolder"> 
     <h2 className="sectionHeader">Earnings per day</h2> 
     <canvas id="lineChart" width="688" height="286"></canvas> 
     </div> 
    ); 
    }, 
    ctx: {}, 
    lineChart: {}, 
    componentDidMount: function() { 
    this.drawChart(); 
    }, 
    componentDidUpdate: function() { 
    this.drawChart(); 
    }, 
    drawChart: function() { 
    var lineData = { 
     labels: this.props.dates, 
     datasets: [{ 
     label: "Earnings", 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: this.props.earnings, 
     }] 
    } 
    this.ctx = document.getElementById("lineChart").getContext("2d"); 
    this.lineChart = new Chart(this.ctx).Line(lineData); 
    } 
});

但我不能想到“作出反应的方式”来删除和替换canvas元素，每一次它需要被重画。

任何想法？

来源

2015-12-29 fnsjdnfksjdb

你怎么想清空该油画像$（“线型图”），空（）的值 –

@dhavalpatel前assgine，这个程序没有jQuery的现在。我可能会在稍后添加它，但如果可能的话，我想保留这部分的React.js风格 – fnsjdnfksjdb

document.getElementById（“lineChart”）。innerHTML =“”; –

在React中，每当道具或状态发生变化时，都希望改变视图。如果您正在使用DOM操作库（如Chart.js），那么这就是React生命周期方法派上用场的地方。

https://facebook.github.io/react/docs/component-specs.html

您可以使用componentWillUpdate或componentDidUpdate（取决于什么适合）到下一个状态比较以前的状态。

componentWillUpdate(nextProps, nextState) { 
    /* Optionally include logic comparing nextProps or nextState 
    * to this.props or this.state 
    */ 
    this.lineChart.clear(); 
}

只要确保它是推动图表中变化的道具/状态更改即可。

我对这个明显的Chart.js错误了解不多。但是如果你确实需要每次都重新渲染canvas元素，我会建议在canvas元素上放置一个key属性。

<canvas key={this.uniqueKey()} id="lineChart" width="688" height="286"></canvas>

还有什么this.uniqueKey()很难说。但每当道具或状态发生变化时，它都会有所不同。如果简单的方法如Chart#clear()（或可能的Chart#destroy()）失败，则只能采用此方法。

来源

2015-12-29 07:44:18

你指的是哪一种“清除”方法？ – azium

http://www.chartjs.org/docs/#advanced-usage –

看看那个，摧毁做到了！感谢您查看这个。出于好奇，Math.random（）会是一个可以接受的关键，还是会触发可怕的事情？ – fnsjdnfksjdb

试试这个 -

var LineChart = React.createClass({ 
    render: function() { 
    return (
     <div id="lineHolder" className="graphHolder"> 
     <h2 className="sectionHeader">Earnings per day</h2> 
     <canvas ref="lineChart" key={this.state.canvasUpdateToggle} width="688" height="286"></canvas> 
     </div> 
    ); 
    }, 
    ctx: {}, 
    lineChart: {}, 
    getInitialState:function(){ 
    return {canvasUpdateToggle:"0"}; 
    }, 
    componentDidMount: function() { 
    this.drawChart(); 
    }, 
    componentDidUpdate: function() { 
    this.drawChart(); 
    }, 
    componentWillReceiveProps:function(){ 
    var canvasUpdateToggle = this.state.canvasUpdateToggle == 0? 1: 0; 
    this.setState({"canvasUpdateToggle":canvasUpdateToggle}); 
    }, 
    drawChart: function() { 
    var lineData = { 
     labels: this.props.dates, 
     datasets: [{ 
     label: "Earnings", 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: this.props.earnings, 
     }] 
    } 
    this.ctx = this.refs.lineChart.getContext("2d"); 
    this.lineChart = new Chart(this.ctx).Line(lineData); 
    } 
});

来源

2015-12-29 08:32:46 hazardous

使用React删除和重新创建一个元素

回答

相关问题