in React $ (...) .highcharts-Methode "Uncaught TypeError: ist keine Funktion"

Question

Der Code muss über 'Daten' iterieren und drei Diagramme im DOM erstellen. der eigentliche Code ist lang und nicht leicht reproduzierbar. Es ist ein Pseudo-Code. Ich weiß Es ist nicht ratsam, über die jQuery Append-Methode an DOM anzuhängen.

und Mock-Code ist wie folgt aus:

export class Combination extends React.Component { 
    componentDidMount(){ 
      $.ajax(url:'something' 
      ... 
      success(data): { 
       data.map(function(dataset){ 

       $('<div id="chart">') 
       .append('#combination') 
       .highchart({ 
       chart: { 
        ... 
       } 
       }) 
      } 
      } 
     ) 
    } 
} 

Der Fehler ist „Uncaught Typeerror:. (0, _jquery2.default) (...) appendTo (...) highcharts ist keine Funktion. "

wenn ich ändern Sie den Code aus:

.highchart({ 
    ... 

zu:

Highchart.chart('chart',{ 
    }) 

aber was es schafft, ist wie folgt:

<div id='chart' data-highcharts-chart="2"></div> 
<div id='chart'></div> 
<div id='chart'></div> 

es Charts wie dies schafft muss:

<div id='chart' data-highcharts-chart="0"></div> 
<div id='chart' data-highcharts-chart="1"></div> 
<div id='chart' data-highcharts-chart="2"></div> 

es offensichtlich ist es nicht richtig ist, iterieren.

Answer 1

Ich stimme @Daniel Zuzevich, dass jQuery nicht gut mit React geliert. Dieser Ansatz ist also grundsätzlich fehlerhaft.

Nachdem ich das gesagt habe, würde ich vermuten, dass es ist, weil Sie eine statische id verwenden. Warum versuchen Sie nicht, für jedes zugeordnete Element einen eindeutigen id zu erstellen?

data.map(function(dataset, key){ 

      $(`<div id="chart${key}">`) 
      .append('#combination') 

      Highchart.chart(`chart${key}`, { 
      chart: { 
       ... 
      } 
      })