无法使用 refs 从 render() 方法中获取 HTML 元素

Posted 2023-04-14

【中文标题】无法使用 refs 从 render() 方法中获取 HTML 元素

【英文标题】：Cannot get an HTML element from the render() method using refs

【发布时间】：2021-02-05 22:28:16

【问题描述】：

我正在尝试使用 ReactJS 创建一个图形编辑器。我有我的Workspace 组件。这个组件使用画布绘制对象。 Workspace 组件是一个 React 类组件。 我无法获取 render() 方法中的 html 元素。

我不能使用document.getElementById(..)，我决定使用React Refs。这更像是干净的。

我遇到了这样的错误：

TypeError：无法读取 null 的属性“getContext”

import React,  Component  from 'react';
import './Workspace.css';

// Workspace component is resposiable for drawing defferent elements on the screen
// It uses canvas API to draw elements and the stuff like that
export default class Workspace extends Component 

    constructor(props) 

        // Calling parent`s constructor function
        super(props);

        // All objects that will be drawn
        this.objects = [];

        // Creating the `canvasRef` ref for having access to the canvas element
        this.canvasRef = React.createRef();

        // Getting the canvas element, using the`canvasRef` ref
        const canvas = this.canvasRef.current;

        // Creating context
        this.context = canvas.getContext('2d');

    

    render() 
        return (
            <div className="workspace">
                <canvas className="canvas" ref=this.canvasRef></canvas>
            </div>
        )
    

【参考方案1】：

如果您要从上到下阅读代码，那么在调用 render 方法之前，canvas 元素将不存在。因此，您必须等待组件实际渲染一次才能创建上下文。

更具体地说，等待调用 componentDidMount 方法并在其中创建您的上下文。

import React,  Component  from 'react';
import './Workspace.css';

// Workspace component is resposiable for drawing defferent elements on the screen
// It uses canvas API to draw elements and the stuff like that
export default class Workspace extends Component 

    constructor(props) 

        // Calling parent`s constructor function
        super(props);

        // All objects that will be drawn
        this.objects = [];

        // Creating the `canvasRef` ref for having access to the canvas element
        this.canvasRef = React.createRef();
    

    componentDidMount() 
        // Getting the canvas element, using the`canvasRef` ref
        const canvas = this.canvasRef.current;

        // Creating context
        this.context = canvas.getContext('2d');
    

    render() 
        return (
            <div className="workspace">
                <canvas className="canvas" ref=this.canvasRef></canvas>
            </div>
        )
    

【参考方案2】：

this.canvasRef 只能在 componentDidMount 中访问 componentDidMount called BEFORE ref callback 接受的答案将为您提供更多信息。美好的一天！