如何从封装组件内的 onClick 隐藏封装组件的 div？答案

【问题标题】：How do I hide the div that is encapsulating a component from an onClick inside the encapsulated component?如何从封装组件内的 onClick 隐藏封装组件的 div？
【发布时间】：2020-10-31 14:53:42
【问题描述】：

我目前有以下代码，我在 react-grid-layout 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 onClick一个按钮：

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

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

{ 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 和卡片都会关闭，并且只显示背景颜色。即使使用构造函数，我也尝试了几种不同的方法，但它仍然不起作用。我不确定还能尝试什么。

非常感谢任何帮助。

【问题讨论】：

顺便说一句，控制台中是否记录了任何错误？
如果<PortfolioAssets />中有多个<IconButton />，由于<PortfolioAssets />的渲染是基于showCard，所有<IconButton />都有相同的click handler正在将 showCard 设置为 false
是的，Warning: Failed prop type: Cannot read property 'key' of null in ReactGridLayout (created by ResponsiveReactGridLayout)、Uncaught TypeError: Cannot read property 'key' of null at utils.js:121 和 Uncaught TypeError: Cannot read property 'key' of null at utils.js:121
PortfolioAssets 中只有 1 个 IconButton
根据您的layouts，我猜它正在期待一个key="a" 的孩子；如果将null 替换为<div key="a"></div> 会怎样？

标签： javascript reactjs jsx

【解决方案1】：

当 showCard 为 false 时，您会向 ResponsiveReactGridLayout 组件返回一个 null 子级，并且该组件似乎会尝试读取子级的 key 属性而不检查它们是否为 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"/>

【讨论】：