Блог

У меня есть 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.

Каково наилучшее решение этой проблемы? Также правильно ли я подхожу к проблеме?

Я попытался добавить setTimeout на app.js для загрузки функций через x секунд. Это решает проблему и отображает график, но не является надежным, поскольку иногда компонент React не отображает за x секунд или отображает намного быстрее, чем за x секунд.

Есть помощь / предложения?

Вы ищете 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>  

Если вы используете Rickshaw с реактивными крючками, вы можете убедиться, что элемент DOM загружается первым через useEffect крючок.

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