脚本未在 React JS 中执行答案

【问题标题】：Script is not executed in React JS脚本未在 React JS 中执行
【发布时间】：2018-06-16 18:00:51
【问题描述】：

我正在尝试使用画布和脚本绘制带有一条对角线的矩形。但是，不幸的是，只有矩形才会显示在我的浏览器中。好像脚本没有执行。

代码：

import React, { Component } from 'react';
import '../App.css';

class Graphics extends Component{

    render(){
        return(
            <div id="canvas">
            Draw a diagonal Line in Rectangular

            <canvas id="myCanvas" className="canvas-style" width="200" height="100">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</div>
        );
    }
}

export default Graphics;

【问题讨论】：

标签： javascript html reactjs react-redux

【解决方案1】：

你应该在componentDidMount()中写下你的脚本标签。

【讨论】：

【解决方案2】：

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);

【讨论】：

【解决方案3】：

你可以使用下面的代码，

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;

【讨论】：