Javascript 脚本未在React JS中执行

我试图用画布和脚本画一条对角线的矩形。但不幸的是，只有矩形显示在我的浏览器中。看起来脚本没有执行

代码：

import React，{Component}来自'React'；
导入“../App.css”；
类图形扩展组件{
render（）{
返回(
用矩形画一条对角线
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
);
}
}
导出默认图形；

您应该在

componentDidMount（）

中编写脚本标记，您可以使用以下代码

import React, { Component } from 'react';
import '../App.css';
class Graphics extends Component{
 componentDidMount(){
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.moveTo(0,0);
   ctx.lineTo(200,100);
   ctx.stroke();
  }
    render(){
        return(
            <div id="canvas">
            Draw a diagonal Line in Rectangular

            <canvas id="myCanvas" className="canvas-style" width="200" height="100">
            </canvas>

            </div>
        );
    }
}

export default Graphics;

import React，{Component}来自'React'；
导入“../App.css”；
类图形扩展组件{
componentDidMount（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
}
render（）{
返回(
用矩形画一条对角线
);
}
}
导出默认图形；

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
组件安装（）{
设c=document.getElementById（“myCanvas”）；
设ctx=c.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.stroke（）；
}
渲染（）{
返回(
用矩形画一条对角线
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

import React, { Component } from 'react';
import '../App.css';
class Graphics extends Component{
 componentDidMount(){
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.moveTo(0,0);
   ctx.lineTo(200,100);
   ctx.stroke();
  }
    render(){
        return(
            <div id="canvas">
            Draw a diagonal Line in Rectangular

            <canvas id="myCanvas" className="canvas-style" width="200" height="100">
            </canvas>

            </div>
        );
    }
}

export default Graphics;

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  componentDidMount () {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
  }
  render () {
    return (
      <div className="App">
        <div id="canvas">
          Draw a diagonal Line in Rectangular
        <canvas
          id="myCanvas"
          className="canvas-style"
          width="200"
          height="100" />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);