集成人力车 JS 和 React JS

Question

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

在我的反应模块（bundle.jsx）中 class 我渲染

<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 秒快得多。

有help/suggestions吗？

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

如果您将 Rickshaw 与 React Hooks 一起使用，您可以确保首先通过 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" />);

集成人力车 JS 和 React JS

Integrating Rickshaw JS and React JS

javascript

rickshaw

reactjs