javascript - 使用 React 删除和重新创建元素

Question

我正在尝试让 Chart.js 与 React.js 一起工作，我很接近。

我让 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 元素的“ react 方式”。

有什么想法吗？

Answer 1

在 React 中，您希望每次 props 或 state 改变时都改变 View 。如果您使用的是 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();
}

只要确保是 props/state 的变化驱动了 Chart 的变化。

我对这个明显的 Chart.js 错误知之甚少。但是，如果您确实需要每次都重新渲染 canvas 元素，我建议在 canvas 元素上放置一个 key 属性。

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

this.uniqueKey() 产生的结果很难说。但每次 Prop 或状态改变时都需要不同。并且仅在 Chart#clear()(或可能是 Chart#destroy())等更简单的方法失败时才使用此方法。