html 元素無法反應

Question

我正在嘗試將腳本添加到由反應組件創建的元素中。 這個想法是使用腳本在 id="matrix" 的 canvas 中繪制一些效果。

我已成功將腳本添加到我的 index.html 中，我正在嘗試執行它。 但是，我的document.getElementById("matrix")返回 null 。

我嘗試做的事情清單：

這個答案的使用效果。
將導入腳本更改為正文標記的結尾。
將document.getElementById("matrix")更改為document.querySelector("#matrix")

我的 index.html 主體：

<body>
    <div id="root" class="has-navbar-fixed-top"></div>
    <script async scr="../src/MatrixEffect/matrix.js"></script>
</body>

matrix.js（腳本） ：

window.onload = Init;

function Init() {
  const canvas = document.getElementById("matrix");
  /* const canvas = document.querySelector("#matrix"); */
  console.log(canvas); /*returns null */
  const context = canvas.getContext("2d");
}

矩陣組件.js ：


import styles from "./Matrix.module.css";

const MatrixComponent = () => {
  return (
    <div className={`${styles.container}`}>
      <canvas id="matrix" className={`${styles.canvas}`}></canvas>
    </div>
  );
};

export default MatrixComponent;

錯誤：

matrix.js:7 Uncaught TypeError: Cannot read properties of null (reading 'getContext') at Init (matrix.js:7:1)

Answer 1

我必須通過使用 refs 使它工作：

反應函數：

export default function MatrixComponent() {
  const ref = useRef();

  useEffect(() => {
    if (ref.current) {
      const canvas = ref.current;

      
      console.log(canvas);
      const context = canvas.getContext("2d");
      /* rest of code */
    }
  }, []);

  return (
    <div className={`${styles.container}`}>
      <canvas ref={ref} className={`${styles.canvas}`} />
    </div>
  );
}

反應類：

import React from "react";

class MatrixComponent2 extends React.Component {
  constructor(props) {
    super(props);

    this.matrix = React.createRef();
  }

  componentDidMount() {
    this.context = this.matrix.current.getContext("2d");
    /*rest of code*/
  }

  render() {
    return <canvas ref={this.matrix} />;
  }
}
export default MatrixComponent2;

html 元素無法反應

問題描述

1 個解決方案

解決方案1
0 2022-08-30 21:50:12

html 元素無法反應

問題描述

1 個解決方案

解決方案1 0 2022-08-30 21:50:12

解決方案1
0 2022-08-30 21:50:12