Question

代码必须遍历“数据”并在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>

很明显它没有正确迭代。

Answer 1

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

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

data.map(function(dataset, key){

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

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

在React $（...）.highcharts方法中“未捕获的TypeError：不是函数”

1 个答案: