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

Question

我是新手，我有一个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;

这是组件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;

单击组件D中的按钮时，弹出窗口必须显示A、B、C。我不知道该怎么做。任何人都请帮忙！！

Answer 1

提升状态可以解决这个

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>
</>
);
};