将 react.js 与 chart.js 一起使用时出现“TypeError: document.getElementById(...) is null”

Question

我正在使用 react 和 chart.js 一起绘制条形图。但是在chart.js 中，我们必须使用canvas 标签并找到该标签并将条形图放入其中，我们使用我们正常的document.getElementById() 方法。我尝试了很多组合，例如将document.getElementById() 放在开头，或者放在$(document).ready() 中，甚至在react 的componentDidMount() 方法中。但我仍然得到“TypeError: document.getElementById(...) is null”。如果有人知道，请给我一个建议。 谢谢。

这是我要执行的代码：

var React = require("react");

var Chart = React.createClass({

    getDefaultProps: function() {
        barChartData = {
            labels : ["Option1", "Option2"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data : [65, 35]
                }
            ]
        }
    },

    onload: function() {
        console.log(document.getElementById('canvas_poll'));
        var ctx = document.getElementById("canvas_poll").getContext("2d");

        window.myBar = new Chart(ctx).HorizontalBar(this.props.barChartData, {
            responsive : true,
        });
    },

    componentDidMount: function() {
        this.onload();
    },

    render: function() {

        return (
            <div>
                <canvas classID="canvas_poll" height={100} width={600}></canvas>
            </div>
        );
    }

});

module.exports = Chart;

Answer 1

我正在构建的一个 React Web 应用程序也遇到了类似的问题。除了上一个解决方案中所说的之外，根据我在 cmets 中阅读的内容，我认为您可能会发现一些有用的内容。

脚本在元素实际存在之前运行

一个常见的问题是渲染时元素不存在。

例如，如果您的 HTML 看起来像这样

    <script src="**your file **" type="text/babel"></script>
    <div id="canvas_poll"></div>

那么您的脚本将在您正在寻找的 id 的 div 被渲染之前运行。 但是，切换时，脚本会在 div 形成后运行。

    <div id="canvas_poll"></div>
    <script src="**your file **" type="text/babel"></script>

这样，脚本要查找的元素确实存在并且可以找到。

此链接中列出了一些解决方案Why does jQuery or a DOM method such as getElementById not find the element?

将

改为

在我的情况下，在 div 形成后运行脚本后，我的 getElementById 方法仍然为 null。它最终成为目标 div 的设置方式。

我不知道为什么，但是当我的目标 div 看起来像这样时

    <div id= "target1"/>
    <script src="target1.jsx" type="text/babel"></script>

我可以使用 react 渲染到该容器。但是，如果我尝试渲染第二个反应元素：

    <div id= "target1"/>
    <script src="target1.jsx" type="text/babel"></script>
    <div id= "target2"/>
    <script src="target2.jsx" type="text/babel"></script>

第一个反应元素会出现，但第二个不会。 我所做的修复它是从

更改 div 格式

     <div id="target"/>

到

     <div id="target></div>

在所有目标 div 上。

在我做出这个改变之后，我所有的反应元素都正常了。我不确定它为什么会这样，但我希望它会有所帮助。

Answer 2

document.getElementById() 使用元素的“ID”属性，而不是“classID”（“画布”标签也不支持）。尝试将id="canvas_poll" 添加到画布元素中，如下所示：

<canvas id="canvas_poll" height={100} width={600}></canvas>