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

我正在使用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: 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 ( 
  
 ); } }); module.exports = Chart; 

Answer 1

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

Answer 2

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

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

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

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

然后你的脚本将在div之前运行，你正在寻找的id可以被渲染。 但是，切换时，脚本在div形成后运行。

这样，脚本正在查找的元素实际上存在并且可以找到。

此链接中列出了一些解决方案为什么jQuery或getElementById等DOM方法找不到元素？

将

更改为

在我的情况下，在div形成后运行脚本后，我仍然从getElementById方法中获取null。 它最终成为目标div的设置方式。

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

我可以使用react渲染到该容器。 但是，如果我尝试渲染第二个反应元素：

第一个反应元素会出现，但第二个反应元素不会出现。 我做了什么修复它是改变div格式

至