in React $（...）.highcharts方法「Uncaught TypeError：不是函數」

代碼必須遍歷'data'並在DOM中創建三個圖表。實際的代碼很長，不容易重現。這是一個模擬代碼。我知道通過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: { 
        ... 
       } 
       }) 
      } 
      } 
     ) 
    } 
}

錯誤是「未捕獲類型錯誤：（0，_jquery2.default）（...）appendTo（...）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>

很明顯它不是迭代正常。

來源

2017-10-12 ali shirzad

根本不需要JQuery。爲您的請求嘗試像axios npm模塊。一起溝通jQuery。 –

這是一個非常好的點，但50k額外的圖書館對我來說並不是什麼大事。 –

是的，但jQuery以與React如何在引擎蓋下工作完全相反的方式操縱DOM。 –

我同意@Daniel Zuzevich說jQuery不能很好地與React凝膠。從根本上說，這種方法是有缺陷的。

話雖如此，我猜想這是因爲您使用的是靜態的id。爲什麼不嘗試爲每個映射項目創建一個獨特的id。

data.map(function(dataset, key){ 

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

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

來源

2017-10-12 12:25:31 nikjohn

是的。這是正確的。對不起，一個普通的問題。我將更改爲適當的反應組件並將其發佈到此處。再次感謝您的幫助。 –

當然。我們都來自jQuery世界，無法適應思維的「反應方式」。一旦你到達那裏，這很容易！祝你好運！ – nikjohn

in React $（...）.highcharts方法「Uncaught TypeError：不是函數」

回答

相關問題