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