in React $（...）.highchartsメソッド "Uncaught TypeError：関数ではありません"

Question

コードは、 'data'を反復処理し、DOM内に3つのチャートを作成する必要があります。 実際のコードは長く、容易に再現できません。モックコードです。私は知っているそれは、jQueryのappendメソッドを介してDOMに追加することはお勧めできません。

とモックコードは次のようである：

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

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

エラーが「捕捉されなかっTypeError例外である：。appendTo（...）（0、_jquery2.default）（...）highcharts関数ではありません「

私からのコード を変更：に

.highchart({ 
    ... 

：

Highchart.chart('chart',{ 
    }) 

はなく、何が作成することは、このようなものです：それはこのようにチャートを作成する必要があります

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

：

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

、適切に反復されていない明らかです。

Answer 1

@Daniel Zuzevichによると、jQueryはReactでよくゲル化しません。基本的に、このアプローチには欠陥があります。

私はそれはあなたがスタティックidを使用しているからだと思います。マッピングされたアイテムごとにユニークなidを作成してみてください。

data.map(function(dataset, key){ 

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

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