javascript - 集成人力车 JS 和 React JS

Question

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

在我渲染的类中的 react 模块 (bundle.jsx) 中

<div id="chart_container" />

在我的 js 文件中，我在此 div 上构建

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

问题是当我加载 2 个文件时，我希望只要 React 呈现 div 组件就会创建图形。然而，情况并非如此，因为我的 app.js 文件在呈现我的 React 组件之前得到处理。

这个问题的最佳解决方案是什么？我是否正确地解决了这个问题？

我尝试在 app.js 上添加一个 setTimeout 以在 x 秒后加载函数。这解决了问题并呈现了图形，但并非万无一失，因为有时 React 组件不会在 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>