在 React 中使用 getContext 时出错答案

【问题标题】：Getting Error when using getContext in React在 React 中使用 getContext 时出错
【发布时间】：2021-10-20 19:03:42
【问题描述】：

我正在尝试创建矩阵雨效果作为我的反应背景。我创建了一个矩阵雨雨函数，我用它来包装我的所有其他组件。但我收到一条错误消息，提示“TypeError：canvas.getContext 不是函数”。我正在尝试遵循本网站上提到的模板https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258我在这里做错了什么？为什么它不起作用？

MatrixRain.js 文件

import './MatrixRain.css';
import React, {useEffect, useContext, useRef, useState, useCallback} from 'react';    

const MatrixRain = ( props ) => {
    const canvasRef = useRef(null)
  
    useEffect(() => {
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d'); //this line is giving me an error

    }, [])

    return (
        <div className='matrix-rain' ref={canvasRef}>
            {props.children}
        </div>
    )
};

export default MatrixRain

App.js 文件

import React, { useState, useReducer, createContext, useContext } from 'react';
import PostList from './components/PostList/PostList.js';
import Title from './containers/Title/Title.js';
import Pagination from './components/Pagination/Pagination.js';
import Navbar from './containers/Navbar/Navbar.js';
import Button from './components/Button/Button.js';
import Store from './store/Store.js';
import MatrixRain from './containers/MatrixRain/MatrixRain'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Outlet,
  useParams
} from 'react-router-dom';


const App = () => {

    return (
        <div>
          <Store>
            <MatrixRain>
              <Button />
              <Title />
              <Navbar />
              <PostList />
              <Pagination />
            </MatrixRain>
          </Store>
        </div>
    );
}

export default App;

【问题讨论】：

标签： javascript reactjs canvas

【解决方案1】：

没关系，我发现了问题所在，我所要做的就是改变

    <div className='matrix-rain' ref={canvasRef}>
        {props.children}
    </div>

到

    <canvas className='matrix-rain' ref={canvasRef}>
        {props.children}
    </canvas>

这对我有用

【讨论】：