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

Question

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;

Answer 1

The document.getElementById() uses an element's 'ID' attribute, not 'classID' (which is also unsupported by the 'canvas' tag). Try adding id="canvas_poll" to the canvas element like so:

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

Answer 2

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.