将React Element附加到主体的正确方法是什么？

Question

我正在创建一个非常简单的popover组件，因此我需要将一些JSX直接附加到主体上，而我无法找到如何使用React做到这一点。 另外，React Portal不适合我的弹出框组件。

Answer 1

您的问题是没有任何代码示例的泛型。

您应该利用react生命周期来做到这一点。我的猜测是，您有一个按钮，当单击该按钮时会触发弹出窗口。从这里可以有多种方法。

在渲染返回中添加带有onClick函数的按钮，该按钮可更新状态以切换popoverVisible布尔值。

<button onClick={()=>this.togglePopoverVisible()}>Open popover</button>

函数应如下所示：

togglePopoverVisible() {
    this.setState({
        popoverVisible: !this.state.popoverVisible
    });
}

再次在渲染器中确保显示弹出窗口：

let popover = [];
if (this.state.popoverVisible) {
   popover = <div className="popover"></div>
}

最后在渲染返回中添加：

{popover}

这是主要思想，您创建一个动作，并在触发时更新组件的状态。根据新状态，您可以向DOM树添加或删除元素。在这种情况下，我总是喜欢更新类以切换可见性，而不是添加/删除dom元素。

Answer 2

在ComponentWillmount中 您可以使用以下代码：

ComponentWillmount() {
  this.struct = document.createElement("div");
  document.body.appendChild(this.struct);}