得到"TypeError:document.getElementById(...)为空".当将react.js与chart.js一起使用时 [英] Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js

问题描述

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

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.

这是我要执行的代码:

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;

推荐答案

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

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.

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

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

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

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

for example if your HTML looked like

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

然后您的脚本将在具有您要查找的ID的div之前运行. 但是，切换时，脚本会在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?

更改< div/>到< div></div>

就我而言，在div形成后运行脚本后，我仍无法从getElementById方法获取null.最后就是目标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.

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

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

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

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

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>

第一个react元素会出现，但第二个不会出现. 我要做的是将div格式更改为

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"/>

到

     <div id="target></div>

在所有目标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.

这篇关于得到"TypeError:document.getElementById(...)为空".当将react.js与chart.js一起使用时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！