Получение «TypeError: document.getElementById (...) является нулевым» при использовании response.js с chart.js

Question

Я использую response и chart.js вместе для построения диаграммы. Но в chart.js мы должны использовать теги canvas, и чтобы найти этот тег и поместить в него гистограмму, мы используем наш обычный метод document.getElementById(). Я пробовал много комбинаций, например, положить document.getElementById() в начале или внутри $(document).ready(), даже в режиме реакции 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; 

Answer 1

document.getElementById() использует атрибут, элемента «ID», а не «Classid» (который также поддерживается тегом «холст»). Попробуйте добавить id="canvas_poll" к элементу холста как так:

<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 с идентификатором вы ищете может получить оказаны. Однако при переключении сценарий запускается после формирования 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?

Изменить < DIV/> для < ДИВ > </дел >

В моем случае, я все еще получаю нуль от моего метода getElementById после запуска скрипта после создания div. В конечном итоге это было так, как были созданы целевые div.

Я не знаю, почему, но когда моя цель ДИВ выглядел

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

я мог бы оказать этот контейнер с помощью реакции. Однако, если бы я попытался вынести второй реакции элемент:

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

Первый элемент реагирует будет отображаться, но второй не будет. Что я сделал, чтобы исправить это изменить форматирование Див из

 <div id="target"/> 

в

 <div id="target></div> 

на всех целевых дивы.

После того, как я сделал это изменение, все мои элементы реагирования пришли в порядок. Я не уверен, почему это сработало, но я надеюсь, что это будет полезно.