有没有办法在其兄弟姐妹旁边呈现动态创建的组件答案

【问题标题】：Is there a way to render a dynamically created component next to its sibling有没有办法在其兄弟姐妹旁边呈现动态创建的组件
【发布时间】：2020-06-13 04:23:03
【问题描述】：

我想在其兄弟姐妹旁边呈现动态创建的组件。

我尝试过使用

const onEnter = (e) => {
  ...
  ReactDOM.render(<Breakdown message={message} />, e.currentTarget);
}

但是 ReactDOM.render 会清除它的子组件并用我的新组件替换它。

React 中有没有类似 jquery $(e.currentTarget).append() 的函数？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

试试这个：

const onEnter = (e) => {
  ...
  const elem = document.createElement("DIV");
  e.currentTarget.appendChild(elem);
  ReactDOM.render(<Breakdown message={message} />, elem);
}

但是，这取决于您对实际代码的改进。

【讨论】：

【解决方案2】：

通常您希望使用状态来管理显示/隐藏组件。首先像这样导入useState钩子

import React, { useState } from 'react'

然后您可以使用布尔状态来跟踪是否应该显示故障

const [showBreakdown, setShowBreakdown] = useState(false)

const onEnter = (e) => {
  setShowBreakdown(false)
}

...

return (
  <React.Fragment>
    ...
    <SomeComponent>
    <Breakdown message={message} />
  </React.Fragment>
);

【讨论】：