javascript - React.js 处理 3rd 方库安装

Question

我在 React 组件中使用第三方库时看到一个尴尬的错误。我能够为这篇文章重现一个人为的演示。

首先让我解释一下，我正在使用 c3js - 这是一个图表库，并在 componentDidMount() 中呈现它，并在 componentWillUnmount() 中使用正确的方法删除它调用 this.chart.destroy()。

错误发生在过滤组件本身时，本质上发生的是组件被正确过滤但位于组件内的实际图表与第一个图表保持相同，这是非常奇怪的行为。基本上是错误组件内的错误图表!

您可以通过单击 Remove all charts except chart 3 按钮明白我的意思，我用 chartid 标记了图表并且过滤将正确删除其他图表。

我相当确定这不是我的代码，因为过滤工作正常并更新了 View 。您可以验证，因为我已经标记了图表并且它在 View 中可见。没有控制台错误，我已验证我的代码有效。

所以我的问题是 - 我们可以使用 c3js 解决这个限制吗，或者这真的是我的代码和我呈现图表的方式的问题。

相关演示:https://jsfiddle.net/69z2wepo/38614/

相关代码:

var data = [
  {
    chartid: 1,
    columns: [
                ['x', 0, 1, 2, 3, 4, 5, 6],
                ['data1', 130, 300, 330, 400, 300, 400, 500],
                ['data2', 390, 230, 200, 150, 100, 130, 210],
                ['data3', 290, 430, 300, 160, 210, 170, 190],
                ['data4', 190, 330, 200, 260, 190, 250, 320]
    ]
  },
  {
    chartid: 2,
    columns: [
                ['x', 0, 1, 2, 3, 4, 5, 6],
                ['data1', 130, 300, 330, 400, 300, 400, 500],
                ['data2', 390, 230, 200, 150, 100, 130, 210],
                ['data3', 290, 430, 300, 160, 210, 170, 190]
    ]
  },
  {
    chartid: 3,
    columns: [
                ['x', 0, 1, 2, 3, 4, 5, 6],
                ['data1', 130, 300, 330, 400, 300, 400, 500],
                ['data2', 390, 230, 200, 150, 100, 130, 210]
    ]
  }
];

var Button = React.createClass({
  handleDelete: function (id) {
    this.props.handleDelete(id);
  },
  render: function() {
    return (
         <button onClick={this.handleDelete.bind(null, 3)}>
            Remove all charts except chart 3
         </button>
    )
  }
});

var Chart = React.createClass({
  componentDidMount() {
    this.chart = c3.generate({
        bindto: '.chart-' + this.props.data.chartid,
        data: {
            columns: this.props.data.columns
        }
    });
  },
  componentWillUnmount() {
    this.chart.destroy();
  },
  render: function() {
    return (
      <div>
        <h4>{"chart-" + this.props.data.chartid}</h4>
        <div className={"chart-" + this.props.data.chartid}>
        </div>
      </div>
      )
  }
});

var Child = React.createClass({
  renderCharts: function(data) {
    return data.map(function(metrics, i) {
      return (
        <Chart key={i} data={metrics} />
      )
    });
  },
  handleDelete: function(id) {
    this.props.handleDelete(id);
  },
  render: function() {
    return (
       <div>
         <Button handleDelete={this.handleDelete} />
         {this.renderCharts(this.props.data)}
       </div>
    ) 
  }
})

var App = React.createClass({
  getInitialState: function() {
    return {
      initialData: this.props.data
    }
  },
  handleDelete: function(id) {
     var _filterFunc = function(data) {
       if (data.chartid == id) return true;
       return false;
     };

     var _filterCharts = Array.prototype.filter.call(this.state.initialData, _filterFunc);

     this.setState({
        initialData: _filterCharts
     })
  },
  render: function() {
    return (
      <div>
        <Child handleDelete={this.handleDelete} data={this.state.initialData} />
      </div>
    );
  }
});

ReactDOM.render(
  <App data={data} />,
  document.getElementById('container')
);

Answer 1

问题在于您在图表上设置关键点的方式。这会导致渲染器对您要保留的图表感到困惑。

试试这个: <Chart key={data[i].chartid} data={metrics} />而不是 <Chart key={i} data={metrics} />

看看如何React handles keys .请记住，您正在唯一地标识一个具有组件生命周期 key 的子组件。因此，由于图表 1 由键“1”唯一标识，您无法使用键“1”呈现图表 3。我上面的解决方案确保图表由其图表 ID 而不是其呈现顺序唯一标识。