如何创建一个元素并在反应中使用它对 append 子元素的引用？

Question

我正在尝试在父组件上创建 html 元素反应并访问子组件内的组件 div，然后我可以 append 子组件中的 div 中的新元素。

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

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

有任何想法吗？

父组件如下所示：

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

看起来你试图绕过 React 的基本原则来解决 React 提供其他工具的问题。 子与父之间通信的 React 方式是向子传递一个回调 function。 然后孩子调用回调向父母发出信号以更新其孩子。

Answer 2

新手错误，在渲染之前，元素将始终为 null。 我已将下面的行更改为 componentDidMount 事件：

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