Html/静态文件以响应Componet /stateless函数？

Question

我将使用引导和普通js从Html迁移到React。我在很大程度上是成功的，因为它大部分都是在jsx中编写html和引导程序，到目前为止似乎没有任何问题。但是我遇到了与图表显示有关的一组特定的html和js代码的问题。我试图把这些代码组合成一个组件，就像我和其他人一样。我得到了一个错误"Uncaught :无法读取空“的属性'getContext‘。我试着做组件挂载，然后我得到图表本身没有定义的错误。下面是没有问题的html和内联js代码以及我的无状态函数尝试。图表数据本身来自https://github.com/nnnick/Chart.js/blob/master/LICENSE.md。如果有人想看到整个代码，它在这里：https://www.dropbox.com/s/552xpfs3ubggrmd/portfolio.rar?dl=0 ps: Testing.html有完整的代码，这些代码是我试图将其变成组件的代码。

​

import React ,{Component} from 'react';
import chart from '../../../assets/js/Chart';
import '../../../assets/css/main.css';

export default class Skills extends Component {


render() {
  var doughnutData1 = [
        {
          value: 55,
          color:"#1abc9c"
        },
        {
          value : 30,
          color : "#ecf0f1"
        }
      ];
  var doughnutData2 = [
          {
            value: 80,
            color:"#1abc9c"
          },
          {
            value : 10,
            color : "#ecf0f1"
          }
        ];
  var doughnutData3 = [
            {
              value: 40,
              color:"#1abc9c"
            },
            {
              value : 35,
              color : "#ecf0f1"
            }
          ];
  var doughnutData4 = [
              {
                value: 95,
                color:"#1abc9c"
              },
              {
                value : 20,
                color : "#ecf0f1"
              }
            ];
  var doughnutData5 = [
                {
                  value: 65,
                  color:"#1abc9c"
                },
                {
                  value : 30,
                  color : "#ecf0f1"
                }
              ];
  var doughnutData6 = [
                  {
                    value: 50,
                    color:"#1abc9c"
                  },
                  {
                    value : 50,
                    color : "#ecf0f1"
                  }
                ];

      let myDoughnut1 = new chart.Chart(document.getElementById("javascript").getContext("2d")).Doughnut(doughnutData1);
      let myDoughnut2 = new chart.Chart(document.getElementById("bootstrap").getContext("2d")).Doughnut(doughnutData2);
      let myDoughnut3 = new chart.Chart(document.getElementById("wordpress").getContext("2d")).Doughnut(doughnutData3);
      let myDoughnut4 = new chart.Chart(document.getElementById("html").getContext("2d")).Doughnut(doughnutData4);
      let myDoughnut5 = new chart.Chart(document.getElementById("photoshop").getContext("2d")).Doughnut(doughnutData5);
      let myDoughnut6 = new chart.Chart(document.getElementById("illustrator").getContext("2d")).Doughnut(doughnutData6);

////////////////////////////////////////////
///////////////////////////////////////////
//////////////////////////////////////////
//////////////////////////////////////////



return (

//start
<div>


  <div id="skillswrap">
    <div className="container">
      <div className="row">
          <div className="col-lg-2 col-lg-offset-1">
            <h5>SKILLS</h5>
          </div>
          <div className="col-lg-3 centered">
            <canvas id="javascript" height="130" width="130"></canvas>
            <p>Javascript</p>
            <br></br>
             {myDoughnut1}
          </div>
          <div className="col-lg-3 centered">
            <canvas id="bootstrap" height="130" width="130"></canvas>
            <p>Bootstrap</p>
            <br></br>
               {myDoughnut2}
          </div>
          <div className="col-lg-3 centered">
            <canvas id="wordpress" height="130" width="130"></canvas>
            <p>jQuery</p>
            <br></br>
               {myDoughnut3}
          </div>

          <div className="col-lg-3 col-lg-offset-3 centered">
            <canvas id="html" height="130" width="130"></canvas>
            <p>HTML/CSS</p>
            <br></br>
               {myDoughnut4}
          </div>
          <div className="col-lg-3 centered">
            <canvas id="photoshop" height="130" width="130"></canvas>
            <p>Angular Js</p>
            <br></br>
               {myDoughnut5}
          </div>
          <div className="col-lg-3 centered">
            <canvas id="illustrator" height="130" width="130"></canvas>
            <p>React</p>
            <br></br>
               {myDoughnut6}
          </div>
  <p>Other Skills - UNIX Commands, NPM, Gulp, bower packages, Web packs </p>
  <p>Other Soft Skills - NOSQL,MYSQL, Node JS </p>
  <p>Other Softer Skills - C#, Java, Objective C, MYSQL, PHP, Python </p>


      </div>
  <br></br>
    </div>
  </div>

</div>
//end


);




};





}

​

​

<div id="skillswrap">
		<div class="container">
			<div class="row">
					<div class="col-lg-2 col-lg-offset-1">
						<h5>SKILLS</h5>
					</div>
					<div class="col-lg-3 centered">
						<canvas id="javascript" height="130" width="130"></canvas>
						<p>Javascript</p>
						<br>
						<script>
							var doughnutData = [
									{
										value: 55,
										color:"#1abc9c"
									},
									{
										value : 30,
										color : "#ecf0f1"
									}
								];
								var myDoughnut = new Chart(document.getElementById("javascript").getContext("2d")).Doughnut(doughnutData);
						</script>
					</div>
					<div class="col-lg-3 centered">
						<canvas id="bootstrap" height="130" width="130"></canvas>
						<p>Bootstrap</p>
						<br>
						<script>
							var doughnutData = [
									{
										value: 80,
										color:"#1abc9c"
									},
									{
										value : 10,
										color : "#ecf0f1"
									}
								];
								var myDoughnut = new Chart(document.getElementById("bootstrap").getContext("2d")).Doughnut(doughnutData);
						</script>
					</div>
					<div class="col-lg-3 centered">
						<canvas id="wordpress" height="130" width="130"></canvas>
						<p>jQuery</p>
						<br>
						<script>
							var doughnutData = [
									{
										value: 40,
										color:"#1abc9c"
									},
									{
										value : 35,
										color : "#ecf0f1"
									}
								];
								var myDoughnut = new Chart(document.getElementById("wordpress").getContext("2d")).Doughnut(doughnutData);
						</script>
					</div>

					<div class="col-lg-3 col-lg-offset-3 centered">
						<canvas id="html" height="130" width="130"></canvas>
						<p>HTML/CSS</p>
						<br>
						<script>
							var doughnutData = [
									{
										value: 95,
										color:"#1abc9c"
									},
									{
										value : 20,
										color : "#ecf0f1"
									}
								];
								var myDoughnut = new Chart(document.getElementById("html").getContext("2d")).Doughnut(doughnutData);
						</script>
					</div>
					<div class="col-lg-3 centered">
						<canvas id="photoshop" height="130" width="130"></canvas>
						<p>Angular Js</p>
						<br>
						<script>
							var doughnutData = [
									{
										value: 65,
										color:"#1abc9c"
									},
									{
										value : 30,
										color : "#ecf0f1"
									}
								];
								var myDoughnut = new Chart(document.getElementById("photoshop").getContext("2d")).Doughnut(doughnutData);
						</script>
					</div>
					<div class="col-lg-3 centered">
						<canvas id="illustrator" height="130" width="130"></canvas>
						<p>React</p>
						<br>
						<script>
							var doughnutData = [
									{
										value: 50,
										color:"#1abc9c"
									},
									{
										value : 50,
										color : "#ecf0f1"
									}
								];
								var myDoughnut = new Chart(document.getElementById("illustrator").getContext("2d")).Doughnut(doughnutData);
						</script>
					</div>
<p>Other Skills - UNIX Commands, NPM, Gulp, bower packages, Web packs </p>
<p>Other Soft Skills - NOSQL,MYSQL, Node JS </p>
<p>Other Softer Skills - C#, Java, Objective C, MYSQL, PHP, Python </p>


			</div>
			<br>
		</div>
	</div>

​

Answer 1

看起来document.getElementById("...").getContext("2d")在render()中失败了，因为元素还没有挂载到DOM中。

您应该等待componentDidMount，并在那里输入图表模块。

粗略的例子：

 export default class Skills extends Component {

      componentDidMount() {
           new chart.Chart(this.javascriptEl.getContext("2d")).Doughnut(data);
      }

      render() {
          return (
               <canvas ref={(el) => {this.javascriptEl=el}}></canvas>
          );
      }
 }