Как интегрировать FlotJs в ReactJs

Question

Я пытаюсь интегрировать Flot диаграммы в Реагировать, но я получаю $.plot не ошибка функции, я следующий код

Script теги index.html

<script src="dist/libs/js/jquery.min.js"></script> 
<script src="dist/libs/js/jquery.flot.js"></script> 
<script src="dist/libs/js/jquery.flot.stack.js"></script> 
<script src="dist/libs/js/jquery.flot.symbol.js"></script> 

Мои Реагировать компонент

class OfferGraph extends React.Component { 
    constructor(){ 
    super(); 
    this.state ={ 
     isLogged:false 
    } 

    //Test Code 
    let node = $('#trackInsightGraph'); 
    $.plot(node, [{ 
     data: data['searchAverage'], 
     points: {show: false} 
    }, { 
     data: data['offer'], 
     points: {show: false} 
    }, { 
     data: data['similar'], 
     points: {show: false} 
    }, { 
     data: data['c01'], 
     lines: {show: true} 
    }], options); 
    } 

    render(){ 
    return <div id="trackInsightGraph"> 
    </div> 
    } 

} 
export default OfferGraph; 

Я не могу использовать другую схему библиотеки, как наиболее функциональные написано для Flot Пожалуйста help, если какой-либо орган может указать пример того, как эти плагины (Flot) jQuery могут быть интегрированы в React

Answer 1

Проблема с вашим кодом - как заданным, так и неустановленным, но предполагаемым - заключается в том, что конструктор собирается сначала вызываться, прежде чем контейнер контейнера диаграммы будет создан в функции render(). И конструктору нужен этот контейнер div. По крайней мере, это то, что я предполагаю, основываясь на неполном приведенном коде.

Я создал jsfiddle, который показывает how I would approach the issue. Я использую React.createClass() для создания компонента. Внутри этого функция renderChart() является фактическим кодом чертежа, и для контейнера, который создается в функции render(), используется ref.

Оба данных для схемы и параметров передаются по вызову ReactDOM.render() в нижней части кода. Этот вызов создает контейнер (помещает его в другой контейнер), и в это время передаются два реквизита.

(Примечание: я решил не использовать JSX для этого примера я оставляю изменения в качестве упражнения для читателя.).