Question

我正在使用react和chart.js来绘制条形图。但是在chart.js中我们必须使用canvas标签并找到该标签并在其中放置条形图，我们使用普通的document.getElementById()方法。我尝试了许多组合，例如将$(document).ready()放在开头，或放在componentDidMount()内，甚至在react的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;”。如果有人知道，请给我一个建议。谢谢。

以下是我要执行的代码：

$(document).ready(function () {
    var whatAmI = ["Fruit", "Not a vegetable", "A phone", "Yummie in tummy"];
    var j, i = 4,
        n = whatAmI.length;

    function changeSubTitle() {
        setTimeout(function () {
            j = Math.floor(Math.random() * n - 1);
            if (j >= i) j += 1;

            $(".page-header > h2").animate({
                "opacity": 0
            }, 700, function () {
                $(this).children("span").text(whatAmI[j]);
                $(this).animate({
                    "opacity": 1
                }, 700, changeSubTitle);
            });
        }, 1000);
        i = j;
    }
    changeSubTitle();
});

Answer 1

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

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

Answer 2

我遇到了与我正在构建的反应式网络应用程序类似的问题。除了上一个解决方案中所说的内容之外，根据我在评论中所读到的内容，我认为您可能会发现一些有用的东西。

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

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

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

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

然后你的脚本将在div之前运行，你正在寻找的id可以被渲染。但是，切换时，脚本在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?

中列出了一些解决方案

更改＆lt; div /＆gt;到＆lt; div＆gt;＆lt; / div＆gt;

在我的情况下，在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上。

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

将react.js与chart.js一起使用时，获取“TypeError：document.getElementById（...）为null”

2 个答案: