不变冲突:对象作为React子对象无效(找到：[对象HTMLCanvasElement])

Question

全错误日志：

不变冲突:对象作为React子对象无效(找到:对象HTMLCanvasElement)。如果您打算呈现一个子集合，请使用数组代替。在CanvasEngine中 以上错误发生在组件中:在CanvasEngine中

渲染没有返回。elementCanvas有什么问题: HTMLCanvasElement ?！

我想要从代码中获得html元素，我尝试将其存储在this.state中，但仍然无法工作.

​

import * as React from "react";

export class CanvasEngine extends React.Component<{name:string}, {}, void > {

    private elementCanvas: HTMLCanvasElement;
    private programName: string = " test ";
    private width: number = 100;
    private height: number = 100;

    private test: number = 1;

    constructor(props: {name:string}) {
        super(props);

        this.state = {  elementCanvas : document.createElement('canvas') };
        //super( {name} );
        this.elementCanvas = document.createElement('canvas');
        this.elementCanvas.width = 200;
        this.elementCanvas.height = 200;
        //document.body.appendChild(this.elementCanvas);
        console.log("constructor");
        this.tick();
       
    }

    componentDidMount() {
        console.log("!componentDidMount!");
     }

    tick() {

        let context = this.elementCanvas.getContext("2d");
        context.fillStyle = "lime";
        context.clearRect(0, 0, this.width, this.height);

        context.save();
        context.translate(100, 100);

        this.test += 0.01;
        context.rotate(this.test);
        context.fillStyle = "#F00";
        context.fillRect(50, 50, 100, 100);
        context.restore();

        setTimeout( () => { this.tick() } , 30 );
      }

    public render() {
        return <> {this.elementCanvas} </>;
    }
}
//
import * as React from "react";
import * as ReactDOM from "react-dom";

import { ProjectName } from "./components/project-name";
import { CanvasEngine } from "./components/canvas";

ReactDOM.render(
    <>
    <h1>Page title</h1>,
    <CanvasEngine name="nidza" />,
    <ProjectName compiler="TypeScript" framework="React" />
    </>,
    document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>

​

Answer 1

请您不要使用document.createElement()，您可以尝试使用React.createElement()吗？