为什么我的 chart.js 图表不能在 React 中呈现？答案

【问题标题】：Why won't my chart.js chart render in React?为什么我的 chart.js 图表不能在 React 中呈现？
【发布时间】：2019-12-22 07:19:56
【问题描述】：

我已经创建了这个代码示例。我正在使用 React 功能组件，但由于某种原因，图表不会呈现。我认为这是因为 React Hooks 不能很好地处理条件，但我不明白为什么。

https://codesandbox.io/s/sparkling-darkness-e7bdj

为什么图表不渲染？

我使用钩子是因为我不想使用类。看起来这应该可以工作，而且我没有收到任何错误。

我怎样才能让它工作？

【问题讨论】：

标签： reactjs canvas chart.js

【解决方案1】：

我找到了解决方法。

通常，Chart 构造函数调用在 componentDidMount 中。 Hook 等价物是 useEffect。

工作代码如下：

import React, { useRef, useEffect } from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";

import "./styles.css";

function App() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = new Chart(chartRef.current, {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Votes",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)"
              ],
              borderColor: [
                "rgba(255, 99, 132, 1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)"
              ],
              borderWidth: 1
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <canvas ref={chartRef} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：