当使用 react.js 和 chart.js 时出现“TypeError: document.getElementById(...) is null”
我同时使用 react 和 chart.js 来绘制条形图。但在 chart.js 中，我们必须使用画布标签，要找到该标签并在其中放置条形图，我们使用常规的
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;
我在构建 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 格式从
<div id="target"/>
更改为
<div id="target></div>
。
在我做出这一改变之后，我的所有 react 元素都正常显示。我不确定为什么它会这样工作，但我希望它有所帮助。
document.getElementById()
使用元素的“ID”属性，而不是“classID”（“canvas”标签也不支持该属性）。尝试将
id="canvas_poll"
添加到 canvas 元素，如下所示：
<canvas id="canvas_poll" height={100} width={600}></canvas>