Javascript 如何在单击子组件中的按钮时更改父组件内容？

我是个新来的反应者， 我有一个antd Popover，它显示组件A、B和C

<Popover
        content={
          <>
            <A />
            <B />
            <C />
          </>
        }
/>

单击组件B中的按钮时，Popover中只能显示组件D（新）

这是B组分

const B = () => {
const [subScreen, setSubScreen] = useState(false);
onClick =() => {
setSubScreen(true);
}
return(
  <button onClick={onClick}> Click me!</button>
  { subScreen ? <D /> : null }
);
};

export default B;

const B=（）=>{
const[subScreen，setSubScreen]=使用状态（false）；
onClick=（）=>{
设置子屏幕（真）；
}
返回(
点击我！
{子屏幕？：空}
);
};
导出默认值B；

这是组件D

const D = () => {
onClick =() => {
// Popovers content should be A,B and C
}
return(
  <>
  <button onClick={onClick}> Display A,B and C</button>
  <h1> Component D </h1>
  </>
);
};
export default D;

const D=（）=>{
onClick=（）=>{
//Popover内容应为A、B和C
}
返回(
显示A、B和C
成分D
);
};
导出默认值D；

单击组件D中的按钮时，弹出框必须显示A、B、C。 我不知道怎么做。

---

任何人都请帮忙

提升状态可以解决这个问题

const B = () => {
  const [subScreen, setSubScreen] = useState(false);
  const onClick =() => {
    setSubScreen(true);
  }
  const onBack =() => {
    setSubScreen(false);
  }
  return(
    <div>
      <button onClick={onClick}> Click me!</button>
      { subScreen ? <D rollBack={onBack} /> : null }
    </div>

);
};
const D = (props) => {
  const onClick =() => {
// Popovers content should be A,B and C
    props.rollBack()
  }
  return(
    <>
      <button onClick={onClick}> Display A,B and C</button>
      <h1> Component D </h1>
    </>
  );
};

const B=（）=>{
const[subScreen，setSubScreen]=使用状态（false）；
const onClick=（）=>{
设置子屏幕（真）；
}
const onBack=（）=>{
设置子屏幕（假）；
}
返回(
点击我！
{子屏幕？：空}
);
};
常量D=（道具）=>{
const onClick=（）=>{
//Popover内容应为A、B和C
props.rollBack（）
}
返回(
显示A、B和C
成分D
);
};

提升状态可以解决此问题

const B = () => {
  const [subScreen, setSubScreen] = useState(false);
  const onClick =() => {
    setSubScreen(true);
  }
  const onBack =() => {
    setSubScreen(false);
  }
  return(
    <div>
      <button onClick={onClick}> Click me!</button>
      { subScreen ? <D rollBack={onBack} /> : null }
    </div>

);
};
const D = (props) => {
  const onClick =() => {
// Popovers content should be A,B and C
    props.rollBack()
  }
  return(
    <>
      <button onClick={onClick}> Display A,B and C</button>
      <h1> Component D </h1>
    </>
  );
};

const B=（）=>{
const[subScreen，setSubScreen]=使用状态（false）；
const onClick=（）=>{
设置子屏幕（真）；
}
const onBack=（）=>{
设置子屏幕（假）；
}
返回(
点击我！
{子屏幕？：空}
);
};
常量D=（道具）=>{
const onClick=（）=>{
//Popover内容应为A、B和C
props.rollBack（）
}
返回(
显示A、B和C
成分D
);
};

您需要将状态提升到树上，并将回调传递给可以更新状态的子级。您可以使用状态来呈现A、B、C或D。按钮可用于调用将切换状态的回调。您需要将状态提升到树上，并将回调传递给可以更新状态的子级。您可以使用状态来呈现A、B、C或D。按钮可用于调用将切换状态的回调。