Не удается получить элемент HTML из метода render() с использованием ссылок

Я пытаюсь создать графический редактор с ReactJS. У меня есть компонент Workspace. Этот компонент рисует объекты с помощью холста. Компонент Workspace — это компонент класса React. Я не могу получить элемент HTML, который находится в методе render().

Я не мог использовать document.getElementById(..), я решил использовать React Refs. Это больше похоже на чистоту.

А у меня такая ошибка:

TypeError: Не удается прочитать свойство getContext со значением null

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>
        )
    }
}

reactjs javascript react-ref react-class-based-component
person Community    schedule 22.10.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если бы вы читали свой код сверху вниз, то элемент холста еще не существовал бы до того, как был вызван метод render. Таким образом, вам нужно дождаться, пока компонент действительно отобразится один раз, чтобы создать ваш контекст.

Точнее, дождитесь вызова метода 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>
        )
    }
}
person Emiel Zuurbier    schedule 22.10.2020

arrow_upward
1
arrow_downward

this.canvasRef будет доступен только в componentDidMount componentDidMount, вызванном ПЕРЕД обратным вызовом ref, принятый ответ даст вам больше информации. Отличный день!

person Jan    schedule 22.10.2020