如何创建一个元素并使用它的 ref 在反应中附加子元素？答案

【问题标题】：How to create an element and use its ref to append child elements in react?如何创建一个元素并使用它的 ref 在反应中附加子元素？
【发布时间】：2020-01-21 15:17:05
【问题描述】：

我正在尝试在反应的父组件上创建一个 html 元素，并在子组件中访问该组件 div，然后我可以从子组件在 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} />
            );
        }
    }

【问题讨论】：

“我正在尝试在父组件上创建一个 div 元素，以响应并访问子组件内的组件 div，然后我可以在子组件中的 div 中附加新元素。”这听起来像是你试图通过绕过 React 的基本原则来解决 React 中的问题。你也可以在 vanilla JS 中执行此操作。在 React 中，父母应该负责渲染自己的孩子。

标签： javascript reactjs typescript

【解决方案1】：

菜鸟错误，元素在渲染之前总是为空。我已将下面的行更改为 componentDidMount 事件：

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

【讨论】：

【解决方案2】：

看起来您试图绕过 React 的基本原则来解决 React 提供其他工具的问题。 React 在子节点和父节点之间进行通信的方式是向子节点传递一个回调函数。然后子级调用回调向父级发出信号以更新其子级。

【讨论】：

据我所知，要创建该回调，您将使用 REF...我可以试试。请阅读从反应文档中提取的以下内容：“注意以下示例已更新为使用 React 16.3 中引入的 React.createRef() API。如果您使用的是早期版本的 React，我们建议使用回调 refs。”感谢您的回复！
@GabrielMarcondes 我认为您需要从当前的问题中退后一步。在此处描述您要完成的工作。您可以通过填写以下语句中的空白来做到这一点：“作为用户，当我......然后我希望看到......”。换句话说，描述用户与您的应用程序的交互将是什么。从那里我们可以帮助您找到解决方案来完成它。