为什么 HTML 脚本标签不加载反应组件？

Question

I have a react component in Board.js

import React from "react";
import io from "socket.io-client";
import ReactDOM from "react-dom";
import "./style.css";

export default class Board extends React.Component {
timeout;
socket = io.connect("http://localhost:3000");

ctx;
isDrawing = false;

constructor(props) {
super(props);

this.socket.on("mouse", function (data) {
data = JSON.parse(data);

var canvas = document.querySelector("#board");
var ctx = canvas.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(data.draw.x, data.draw.y);
  ctx.lineTo(data.draw.x2, data.draw.y2);
  ctx.closePath();
  ctx.stroke();
});

this.socket.on("canvas-data", function (data) {
  var root = this;
  var interval = setInterval(function () {
    if (root.isDrawing) return;

    root.isDrawing = true;
    clearInterval(interval);

    var image = new Image();
    var canvas = document.querySelector("#board");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    image.src = data;

    image.onload = function () {
      ctx.drawImage(image, 0, 0);
      root.isDrawing = false;
    };
  }, 200);
});
}

componentDidMount() {
this.drawOnCanvas();
}

drawOnCanvas() {
var canvas = document.querySelector("#board");
this.ctx = canvas.getContext("2d");
var ctx = this.ctx;
canvas.height = 400;
canvas.width = window.innerWidth - 60;

/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "#c0392b";

var mouse = { x: 0, y: 0 };
var last_mouse = { x: 0, y: 0 };

/* Mouse capture listener */
canvas.addEventListener(
  "mousemove",
  function (e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
  },
  false
);

/**Adds the mouse capture listener when mouse is clicked */
canvas.addEventListener(
  "mousedown",
  function (e) {
    canvas.addEventListener("mousemove", onPaint, false);
  },
  false
);

/**removes the mouse capture listener when mouse released*/
canvas.addEventListener(
  "mouseup",
  function () {
    canvas.removeEventListener("mousemove", onPaint, false);
  },
  false
);

var root = this;
/**Draws on the canvas based on the previous mouse inputs, sends the canvas as base64image via
 * the socket
 */
var onPaint = function () {
  var x = last_mouse.x;
  var y = last_mouse.y;
  var x2 = mouse.x;
  var y2 = mouse.y;

  root.socket.emit("mouse", JSON.stringify({ draw: { x, y, x2, y2 } }));

  ctx.beginPath();
  ctx.moveTo(last_mouse.x, last_mouse.y);
  ctx.lineTo(mouse.x, mouse.y);
  ctx.closePath();
  ctx.stroke();
};

/**Handles input file loading */
document.getElementById("input").onchange = function (e) {
  var img = new Image();
  img.onload = function () {
    var canvas = document.querySelector("#board");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);

    var base64ImageData = canvas.toDataURL("image/jpg");

    root.socket.emit("canvas-data", base64ImageData);
  };

  img.onerror = function () {
    console.error("The provided file couldn't be loaded as an Image media");
  };

  if (this.files[0]) {
    img.src = URL.createObjectURL(this.files[0]);
  }
};
}

/**download the canvas as a jpg file */
download() {
var canvas = document.querySelector("#board");
var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "burlywood";
ctx.fillRect(0, 0, canvas.width, canvas.height);

var download = document.getElementById("download");
var image = document
  .querySelector("#board")
  .toDataURL("image/jpg")
  .replace("image/jpg", "image/octet-stream");
download.setAttribute("href", image);
}

render() {
return (
  <>
    <input type="file" id="input"></input>
    <a id="download" download="picture.jpg">
      <button type="button" onClick={this.download}>
        Download
      </button>
    </a>
    <div>
      <canvas className="board" id="board"></canvas>
    </div>
  </>
);
}
}
 ReactDOM.render(<Board />, document.getElementById("root"));

whiteboard.html

<!DOCTYPE html>
<html>
<head>

<div id="root"></div> 

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin> 
</script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<script type = "text/babel"src="PaintCanvas/Board.js"></script>
</body>
</html>

I've tried to change the script type multiple times and also wrote the whole Board.js code inside the html document without any success. I tried to follow this tutorial https://reactjs.org/docs/add-react-to-a-website.html and it worked with the provided example, not with my code. I don't get it, in the tutorial they do not import React or ReactDOM. I tried to import them and it seems that it would break the code in the provided example code in the link.

Answer 1

Paste these script links in index.html file in the head section, with your html body having this.

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>