为什么我的代码在componentDidMount生命周期（reactjs）中插入时有效？

Question

我正在尝试将chartist.js与我的react组件一起使用。我从下面提到的链接下载了chartist.js。我已经下载了chartist文件夹并将其保存在我的反应项目中。

当我插入此行时 - ＆gt; const mychart = new Chartist.Line('.ct-chart', data);

在componentDidMount()内部功能我可以在网页上看到图表。

Chartist.js - ＆gt; https://gionkunz.github.io/chartist-js/

Line.js：

import React, { Component } from 'react';

var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

const mychart = new Chartist.Line('.ct-chart', data); <---- Line 10

class Line extends Component {

  render(){
    return(
      <div>
          <div class="ct-chart ct-perfect-fourth">
              {mychart}
          </div>
      </div>
    )}
}

export default Line;

父组件：

render(){
   return(
     <div>
        <Line/>
     </div>
)
}

以上线组件在控制台中显示错误 - ＆gt; cannot read property querySelectorAll现在，当我在Line 10函数中添加componentDidMount() Pie组件时，我的Line组件工作正常，它也在网页上呈现组件，但我无法理解为什么它可以插入{ {1}} line 10内部功能。

下面的代码可以解释为什么呢？

componentDidMount()

屏幕截图错误（注意：在下面的截图中，Pie组件基本上是我在上面代码中的Line组件）：

Answer 1

如React docs中所述，componentDidMount（）用于需要DOM节点的初始化。 new Chartist.Line('.ct-chart', data);显然使用了DOM元素。

作为建议，您可以尝试使用react-chartist作为Chartist.js＆＃34;的反应组件。

干杯！