javascript - 如何在 ReactJS 和 ChartistJS 之间为 svg 委派渲染责任

Question

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

有没有一种方法可以将我的chartist.jssvg 元素集成到一个React组件中，同时清楚地分离和委派两者之间的渲染职责？

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/