javascript - 如何创建一个元素并使用其引用在 react 中附加子元素？

Question

我试图在父组件上创建一个 html 元素，并在子组件中访问该组件 div，然后我可以在子组件的 div 中附加新元素。

经过多次尝试，我无法修复子构造函数上的 props.canvasDivElement.current = null 。

我尝试过使用 REF 和不使用 ref 来做到这一点...到目前为止还没有运气。

有什么想法吗？

父组件如下所示:

import React from "react";
import ReactViewer from "../ReactViewer/ReactViewer";

export default class CanvasWrapper extends React.Component {
    private _divElement: React.RefObject<HTMLDivElement>;

    constructor(props: any) {
        super(props);
        this._divElement = React.createRef<HTMLDivElement>();
    }

    render() {
        return (
            <div>
                <ReactViewer canvasDivElement={this._divElement}></ReactViewer>
            </div>
        );
    }
}

子组件:

import React from "react";

type ReactViewerState = {
};

type ReactViewerProps = {
    canvasDivElement: React.RefObject<HTMLDivElement>;

};

    export default class ReactViewer extends React.Component<ReactViewerProps, ReactViewerState> {
        constructor(props: ReactViewerProps, state: ReactViewerState) {
            super(props, state);
            const newElement = document.createElement('span');
            newElement.innerText = 'element';
            props.canvasDivElement.current!.appendChild(newElement); //current is null
        }

        render() {
            return (
                <div ref={this.props.canvasDivElement} />
            );
        }
    }

Answer 1

菜鸟错误，元素在渲染之前将始终为 null。我已将以下行更改为 componentDidMount 事件:

    props.canvasDivElement.current!.appendChild(newElement);