【发布时间】：2023-04-06 22:20:02
【问题描述】：
我正在将一个投资组合从带有 bootstrap 和 vanilla js 的 Html 转移到 React。我在很大程度上是成功的，因为其中大部分是在 jsx 中编写 html 和引导程序，到目前为止似乎没有问题。但是我遇到了与图表显示有关的特定 html 和 js 代码集的问题。我正在尝试将这些代码集制作成一个组件，就像我和其他人一起做的那样。我收到此错误“未捕获的 TypeError：无法读取 null 的属性 'getContext'”。我尝试做 componentdid mount will mount ，然后我得到图表本身未定义错误。下面是可以正常工作的 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>【问题讨论】：
标签： javascript reactjs ecmascript-6 components react-router