javascript - 为什么我的代码在 componentDidMount 生命周期(reactjs)中插入时可以工作？

Question

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

当我插入这一行时 -> const mychart = new Chartist.Line('.ct-chart', data);

在 componentDidMount() 函数中，我可以在网页上看到图表。

Chartist.js -> 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>
)
}

Above Line 组件在控制台提示错误 -> cannot read property querySelectorAll 现在，当我在 componentDidMount() 中添加 Pie 组件的 Line 10 时> 函数我的 Line 组件工作正常，它也在网页上呈现组件，但我不明白为什么它在 componentDidMount() 函数中插入 line 10 时起作用。

为什么下面的代码有效，但是？

componentDidMount(){
    const mychart = new Chartist.Line('.ct-chart', data);
}

截图错误(注意:下面截图中的 Pie 组件基本上是我上面代码中的 Line 组件):

Answer 1

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

作为建议，您可以尝试 react-chartist那是“Chartist.js 的 React 组件”。

干杯!