React：将孩子插入到已经渲染的父母中

Question

我是 React 新手，尝试将新的子组件添加到已渲染的组件时遇到了一些困难。

我有一个 App 组件，它最初包含一个 Main 组件（主菜单）。

我也有 Popover 组件，当它们是 <App> 的子代（因此是 <Main> 的兄弟姐妹）时，我希望它们出现在 Main 之上。

这些 Popover 组件的数量各不相同。每个<Popover> 可以包含在顶部再次启动另一个<Popover> 的按钮。所以结构就像

<App>
    <Main></Main>
    <Popover></Popover>
    <Popover></Popover>
    ...
</App>

但是，当页面第一次加载时，没有打开任何 Popover 组件，并且<App> 没有任何内容呈现。这是我的代码的精简版：

class App extends React.Component{
    constructor(props){ super(props) }
    
    render(){
        return (
            <div>{this.props.children}</div>
        )
    }
}

class Main extends React.Component{
    constructor(props){ super(props) }
    
    render(){
        return (
            //main menu stuff here
        )
    }
}

ReactDOM.render(<App><Main /></App>, root);

当用户单击某些内容时，如何将新的<Popover>s 添加到我的<App>？在 React 之前，我会简单地做 App.appendChild(Popover) 之类的事情，但我在这里很迷茫。

我应该补充一点，用户将单击以触发初始<Popover> 的元素不包含在<Main> 中；它们在<App> 之外，因为我正在尝试将现有页面慢慢过渡到使用 React。我认为这可能是我的问题的一部分。

Answer 1

所以基本上在 React 中，您有多种方法可以做到这一点，但为了更可靠，您需要拥有表示您将在 DOM 中呈现的动态组件的数据。为此，您需要创建一个状态和一个可以向您的状态添加新信息的函数。然后只需与您的其他组件共享此功能，您就可以从任何地方触发它，这将更新您的状态，这将增加您将呈现的动态组件的数量。

看看这个例子

import { useState } from "react";

export default function App() {
  const [popups, setPopups] = useState([]);

  const addNewPopup = () => {
    setPopups([...popups, { title: "I am a popup" }]);
  };

  return (
    <div className="App">
      <ChildComponent onClick={addNewPopup} />

      {popups.map((p) => {
        return <Popup title={p.title} />;
      })}
    </div>
  );
}

function ChildComponent({ onClick }) {
  return (
    <div>
      <p>I am a child component</p>
      <button onClick={onClick}>Add new element</button>
    </div>
  );
}

function Popup({ title }) {
  return <div>I am a popup with title = {title}</div>;
}