获取“TypeError: document.getElementById(...) is null"将 react.js 与 chart.js 一起使用时

我正在使用 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:函数(){条形图数据 = {标签:[选项1"，选项2"]，数据集:[{填充颜​​色: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)",数据:[65, 35]}]}},加载:函数(){console.log(document.getElementById('canvas_poll'));var ctx = document.getElementById("canvas_poll").getContext("2d");window.myBar = new Chart(ctx).Horizo​​ntalBar(this.props.barChartData, {响应:是的，});},组件DidMount:函数(){this.onload();},渲染:函数(){返回 (
<canvas classID="canvas_poll" height={100} width={600}></canvas></div>);}});module.exports = 图表；

解决方案

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

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

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

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

 <script src="**你的文件**" type="text/babel"></script><div id="canvas_poll"></div>

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

 <div id="canvas_poll"></div><script src="**你的文件**" 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 渲染到该容器.但是，如果我尝试渲染第二个反应元素:

 <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 上.

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

I am using react and chart.js together to plot bar chart. But in chart.js we have to use canvas tags and to find that tag and to place bar chart in it we use our normal document.getElementById() method. I tried lots of combinations like putting document.getElementById() at the beginning, or inside a $(document).ready(), even within react's componentDidMount() method. But Still I am getting "TypeError: document.getElementById(...) is null". If anyone know about it, please give me a suggestion. Thank You.

Here is the code which I am trying to execute:

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;

解决方案

I had a similar problem with a react web app I was building. In addition to what was said in the previous solution, there are a few things I think you might find helpful based on what I read in the comments.

Script is ran before the element actually exists

One common problem is that the element does not exist at the time of rendering.

for example if your HTML looked like

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

then your script would be ran before the div with the id you are looking for could get rendered. However, when switched, the script is ran after the div is formed.

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

That way, the element that the script is looking for actually exists and can be found.

Some solutions to this are listed in this link Why does jQuery or a DOM method such as getElementById not find the element?

Change <div /> to <div></div>

In my case, I was still getting null from my getElementById method after running the script after the div was formed. It ended up being how the target divs were set up.

I'm not sure why, but when my target div looked like

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

I could render to that container using react. However, if I tried to render a second react element:

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

The first react element would show up but the second would not. What I did to fix it was change the div formatting from

     <div id="target"/>

to

     <div id="target></div>

on all the target divs.

After I made that change, all my react elements came in fine. I'm not sure why it worked that way, but I hope it is helpful.