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个文件时，我希望每当div组件由React呈现时都会创建图形。然而事实并非如此，因为我的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>

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" />);

集成Rickshaw JS和React JS

2 个答案: