Интеграция Рикши JS и React JS

Question

У меня есть 2 файла, bundle.jsx (содержит Реагировать компоненты) и app.js (содержит функцию JS, которая включает в рикше классов для построения графиков)

В пределах моей реакции модулей (сверток. JSX) в классе я сделать

<div id="chart_container" /> 

в моей JS файл я построить на этом Div

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

Вопрос заключается в, когда я загрузить 2 файла, я ожидать, что график должен быть создан, когда т компонент div представлен Реактивом. Однако это не тот случай, когда файл app.js обрабатывается до того, как будет обработан компонент React.

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

Я попытался добавить setTimeout на app.js для загрузки функций через 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>