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

问题描述

我正在尝试使用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>
        )
    }
}

解决方法

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

,

如果从上至下阅读代码，则在调用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>
        )
    }
}