Reactjs 切换div以展开语义ui卡组件

我正在使用语义UI React中的组件。我有一组卡片显示一些随机信息。我定义了

extra

prop，它呈现一个按钮。我的想法是，单击此按钮时，切换/展开一个div以显示更多信息。我环顾四周，并没有找到多少关于如何实现这一点

我也从语义用户界面进行了研究，但未能让它在卡组件中很好地嵌套

我想展示一下我到目前为止所拥有的，以及我上面所解释的东西的总体外观

为了简单起见，我只会在下面的组中发布一张卡的代码

 <Card color="blue">
     <Card.Content header="Elliot" textAlign="center" />
     <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
     <Card.Content extra>
       <Button basic circular icon size="tiny">
       <Icon name="plus circle" />
       </Button>
       Show More
     </Card.Content>
 </Card>

显示更多

如果要展开以显示更多内容，可以跟踪哪些卡以某种状态展开。在UI中，您可以使用状态来确定是否应为特定卡呈现额外内容

例：

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“语义ui react”导入{卡片、按钮、图标}；
导入“/styles.css”；
函数App（）{
const[expanded，setExpanded]=useState（{}）；
常量卡片=[1,2,3,4,5,6]；
返回(
你好，代码沙盒
{cards.map（卡号=>(
集膨胀({
…扩大，
[cardNumber]：！扩展的[cardNumber]
})
}
>
{扩展的[cardNumber]&&(
扩展卡{cardNumber}的额外内容
)}
显示更多
))}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
如果要展开以显示更多内容，可以跟踪哪些卡以某种react状态展开。在UI中，可以使用该状态确定是否应为特定卡渲染额外内容

例：

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“语义ui react”导入{卡片、按钮、图标}；
导入“/styles.css”；
函数App（）{
const[expanded，setExpanded]=useState（{}）；
常量卡片=[1,2,3,4,5,6]；
返回(
你好，代码沙盒
{cards.map（卡号=>(
集膨胀({
…扩大，
[cardNumber]：！扩展的[cardNumber]
})
}
>
{扩展的[cardNumber]&&(
扩展卡{cardNumber}的额外内容
)}
显示更多
))}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
我同意@brandon-r的观点，你可以通过处理一个状态对象（在我的例子中是一个数组）来处理显示的额外内容。我所做的与他的例子不同的是利用了
组件，它处理所有样式问题

为了处理打开和关闭额外内容，我使用了一个简单的reducer。我喜欢在需要更复杂状态处理的UI交互上使用
useReducer
钩子。然后我创建了三个组件：一个在打开时显示额外内容，另一个显示显示内容的按钮，第三个用于切换我这样做是为了能够在将来推广它

无论如何，这里是我的分叉代码沙盒的链接，以及我对解决方案的看法：



我希望有帮助


编辑#1
将
style={{height:“100%”}
添加到卡中，以便在打开其中一张卡时保持大小不变

编辑#2
添加显示长描述卡的图片

<Card color="blue" style={{ height: "100%" }}>
  <Card.Content header="Elliot" textAlign="center" />
  <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
  <ExtraContentAccordion
    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
    onToggle={toggleCard(1)}
    open={state[1]}
  />
</Card>

我同意@brandon-r的观点，即可以通过处理state对象（在我的例子中是数组）来处理显示的额外内容。我所做的与他的示例不同的是利用了
组件，该组件处理所有样式问题

为了处理打开和关闭额外内容，我使用了一个简单的reducer。我喜欢在需要更复杂状态处理的UI交互上使用
useReducer
钩子。然后我创建了三个组件：一个在打开时显示额外内容，另一个显示显示内容的按钮，第三个用于切换我这样做是为了能够在将来推广它

无论如何，这里是我的分叉代码沙盒的链接，以及我对解决方案的看法：



我希望有帮助


编辑#1
将
style={{height:“100%”}
添加到卡中，以便在打开其中一张卡时保持大小不变

编辑#2
添加显示长描述卡的图片

<Card color="blue" style={{ height: "100%" }}>
  <Card.Content header="Elliot" textAlign="center" />
  <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
  <ExtraContentAccordion
    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
    onToggle={toggleCard(1)}
    open={state[1]}
  />
</Card>


很好的例子。虽然如果你展开一行中的一张卡，所有其他卡也会展开，而实际上没有通过
onClick
展开。你明白我的意思吗？行中所有卡都会展开的原因是因为它在
card.Group
中（该组使行具有相同的高度）如果你不想让它们保持相同的高度，你可以移除
卡片。分组
，但你需要自己定位它们。我更新了我的示例来说明我的意思：使用你的第一个示例，我所要做的就是设置
高度：100%
，就像上面@guzmonne所说的
。这使得唯一扩展的卡片实际上是e你点击的那个。@DJ2不错，我不知道。谢谢你的关注