reactjs - 在 componentDidUpdate 中 refs 未定义

Question

我想在我的网站上使用 Chart.js。正如你所看到的标题，我正在使用 React.js。要使用 Chart.js，我需要这样的 Canvas 和上下文:

let context = document.getElementById('canvas').getContext('2d');
let chart = new Chart(context, ...);

所以我这样设计组件:

export function updateChart() {
    let context = this.refs.chart.getContext('2d');
    let chart = new Chart(context ,... );
    ...
}

export default class GraphChart extends React.Component {
    constructor() {
        super();
        updateChart = updateChart.bind(this);
    }
    componentDidMount() {
        updateChart();
    }
    render() {
        return <canvas ref="chart" className="chart"></canvas>;
    }
}

如你所见，我导出了两个东西，更新图表函数和GraphChart类。两者都将在父组件中使用，如下所示:

import { updateChart } from './GraphChart';
import GraphChart from './GraphChart';

class Graph extends React.Component {
    ...
    someKindOfAction() {
        // update chart from here!
        updateChart();
    }
    render() {
        return (
            <div>
                <SomeOtherComponents />
                <GraphChart />
            </div>
        );
    }
}

然后父类使用导出的updateChart函数直接更新图表。它正在工作，但只是第一次。卸载并安装 GraphChart 组件后，它的引用只是空的。

为什么 refs 是空的？如果我做错了，如何获取 Canvas 上下文来初始化 Chart.js？

Answer 1

Object refs 未定义，因为 this 不是您想象的那样。尝试记录它。

您要导出的函数未绑定(bind)到组件的 this。或者也许是，但是到最后创建的组件实例。您永远无法确定这就是已安装的实例。即使是，您也不能同时使用多个实例。因此，我会完全拒绝这种方法。

除此之外，提供改变某些组件状态的函数与 React 试图实现的目标完全相反。最基本的想法是组件应该知道在给定一些属性的情况下呈现自身。

您试图解决的问题在于 Canvas API 的本质，它是程序性的。您的目标是弥合声明性 (React) 和过程性 (Canvas) 代码之间的差距。

有些库正是这样做的。你尝试过react-chartjs吗？ https://github.com/reactjs/react-chartjs

无论如何，如果你想知道到底应该如何以“React 方式”实现它，关键是声明你的组件处理的属性(不一定，但最好)，然后使用组件生命周期方法(例如 componentWillReceiveProps 等)来检测属性何时发生变化并采取相应的行动(对 Canvas 执行更改)。

希望这有帮助!祝你好运!