如何从封装组件内部的onClick隐藏封装组件的div

Question

我目前有以下代码，其中我在反应网格布局div中显示一张卡片，以使其可调整大小：

const Dashboard = () => {
const [showCard, setShowCard] = React.useState(true)
const closeCard = () => setShowCard(false)
return (
<div style = {{padding: "2%"}} >
<ResponsiveReactGridLayout
className = "layout"
cols = {{ lg: 4, md: 2, sm: 1, xs: 1, xxs: 1 }}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
rowHeight = {150}
layouts={layouts}
>
{ showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}>
<PortfolioAssets onClose={closeCard} />
</div> : null }
</ResponsiveReactGridLayout>
</div>
)
}

onClose在封装组件PortfolioAssets内部调用点击按钮：

<IconButton 
onClick = {props.onClose}
>
<CloseIcon />
</IconButton>

我只希望这个div在单击X按钮(IconButton(时关闭，页面的其余部分保持不变：

{ showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}>
<PortfolioAssets onClose={closeCard} />
</div> : null }

问题是，每当我单击IconButton时，它就会关闭整个页面上的每个组件和div。页面上的每个div和卡片都会关闭，并且只显示背景色。我尝试了几种不同的方法，甚至使用构造函数，但仍然没有成功。我不知道还能尝试什么。

非常感谢您的帮助。

Answer 1

当showCard为false时，您将向ResponsiveReactGridLayout组件返回一个null子级，并且该组件似乎试图读取子级的键属性，而不检查它们是否为null。这似乎有一个悬而未决的问题：https://github.com/STRML/react-grid-layout/issues/577

解决方法是返回一个带有伪键而不是null的伪组件。

showCard ? <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 4, minW: 1, minH: 4, maxW: 4, maxH: 4}}> : <div key="dummy"/>