0

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

任何帮助是极大的赞赏。

4

1 回答 1

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"/>
于 2020-07-11T20:43:52.047 回答