将react.js与chart.js一起使用时出现“ TypeError：document.getElementById（…）为空”

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

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

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

Answer 2

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

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

一个普遍的问题是在渲染时该元素不存在。

例如，如果您的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>

这样，脚本正在寻找的元素实际上存在并且可以找到。

此链接中列出了一些解决方案， 为什么jQuery或诸如getElementById之类的DOM方法找不到元素？

将<div />更改为<div> </ div>

就我而言，在div形成后运行脚本后，我仍无法从getElementById方法获取null。 最终是如何设置目标div。

我不确定为什么，但是当我的目标div看起来像

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

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

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

第一个react元素将显示，而第二个则没有。 我要做的是将div格式从更改为

     <div id="target"/>

至

     <div id="target></div>

在所有目标div上

完成更改后，我所有的反应要素都变得很好。 我不确定为什么会这样，但是我希望它会有所帮助。