集成Rickshaw JS和React

Question

我有两个文件，bundle.jsx (包含React组件)和app.js (包含JS函数，其中包括用于构建图形的Rickshaw类)。

在我呈现的类中的反应模块(bundle.jsx)中

<div id="chart_container" />

在我的js文件中，我构建了这个div。

var graph = new Rickshaw.Graph.Ajax( {
element: document.querySelector("#chart_container"), ... 
}

问题是，当我加载这两个文件时，我希望每当由React呈现div组件时，就会创建图形。但是，情况并非如此，因为我的app.js文件是在呈现React组件之前被处理的。

解决这个问题的最好办法是什么？我是否也正确地处理了这个问题？

我尝试在app.js上添加一个app.js，以便在x秒后加载函数。这解决了这个问题，并呈现了图形，但并不是傻瓜，因为有时反应性组件不会在x秒内呈现，或者呈现速度比x秒快得多。

有什么帮助/建议吗？

Answer 1

你在找componentDidMount()。该方法是在组件第一次呈现后执行的，因此您可以确保图表容器的存在。下面是一个例子，说明了这一点：

​

class Example extends React.Component {
  componentDidMount() {
    var graph = new Rickshaw.Graph( {
      element: document.querySelector("#chart_container"), 
      width: 300, 
      height: 200, 
      series: [{
        color: 'steelblue',
        data: [ 
          { x: 0, y: 40 }, 
          { x: 1, y: 49 }, 
          { x: 2, y: 38 }, 
          { x: 3, y: 30 }, 
          { x: 4, y: 32 } ]
      }]
    });

    graph.render();
  }

  render() {
    return(
      <div id="chart_container" />
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<!-- React DOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<!-- D3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!-- Rickshaw -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.0/rickshaw.min.js"></script>

<div id="View"></div>

​

Answer 2

如果使用带有React的Rickshaw，可以确保首先通过useEffect钩子加载DOM元素。

  useEffect(() => {
    const graph = new Rickshaw.Graph({
      element: document.querySelector('#chart'),
      renderer: 'scatterplot',
      stroke: true,
      series: [
        {
          data: [...someData],
          color: 'steelblue',
        },
      ],
    });

    graph.render();
  }, []);

  // Then in the functional component...
  return (<div id="chart" />);