javascript - 如何在 ReactJS 和 ChartistJS 之间委托(delegate) svg 的渲染责任

Question

我使用图表库创建了几个 svg 元素 chartist.js现在我正在尝试将 svg 元素移植到 React 中成分。我知道 React 和 ChartistJS 都会尝试渲染 svg，并且由于该问题我的图表不再渲染。我四处搜寻并发现react-chartist但它似乎因工具提示和触摸事件问题而损坏。

有没有一种方法可以将我的 chartist.js svg 元素集成到 React 组件中，同时明确分离和委托(delegate)两者之间的渲染职责？

Answer 1

您可以尝试这样的方法作为起点 -

// Chartist data
var data = {
  labels: ['Jan', 'Feb', 'Mar'],
  series: [
    [9, 6, 4],
    [3, 7, 2]
  ]
};

// React chart component
var ReactChart = React.createClass({
  componentDidMount: function () {
    this.updateChart(this.props.data);
  },
  updateChart: function (data) {
    return new Chartist.Bar('.chart', data);
  },
  render: function () {
    return (
      <div className="chart"></div>
    );
  }
});

// React top level component
var App = React.createClass({
  render: function () {
    return (
      <ReactChart data={data} />
    );
  }
});

React.render(<App />, document.querySelector('.app'));

这里有更详细的示例 - http://www.clintioo.com/2016/01/03/react-charts-with-chartist-js/