在React $(...).highcharts方法中“未捕获的TypeError:不是函数”

时间:2017-10-12 11:51:28

标签: reactjs highcharts

代码必须遍历“数据”并在DOM中创建三个图表。 实际代码很长,不易重现。这是一个模拟代码。我知道不建议通过jQuery append方法追加DOM。

和模拟代码是这样的:

<add name="accVerifier" providerName="Oracle.ManagedDataAccess.Client" connectionString="Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=)(HOST=)(PORT=))(CONNECT_DATA=(SERVICE_NAME=)));User ID ="";Password="";Persist Security Info=True;Max Pool Size=150;Connection Timeout=60;" />

错误是“Uncaught TypeError:(0,_jquery2.default)(...)。appendTo(...)。highcharts不是函数”

当我更改代码时 从:

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

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

为:

  .highchart({
    ...

但它创造的是这样的:

  Highchart.chart('chart',{
  })

它必须创建如下图表:

 <div id='chart' data-highcharts-chart="2"></div>
 <div id='chart'></div>
 <div id='chart'></div>
很明显它没有正确迭代。

1 个答案:

答案 0 :(得分:0)

我同意@Daniel Zuzevich认为jQuery与React没有很好的结合。所以从根本上说,这种方法是有缺陷的。

话虽如此,我猜这是因为你使用静态id。为什么不尝试为每个映射项创建唯一的id

data.map(function(dataset, key){

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

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