Question

我正在使用Semantic-UI-React中的<Card>组件。我有一组卡片显示一些随机信息。我定义了extra道具，该道具呈现了一个按钮。我的想法是在单击该按钮时切换/扩展div以显示更多信息。我环顾四周，却找不到如何实现此目标的方法。

我也从语义ui中研究了<Accordion>，但无法使其完全嵌套在卡组件中。

我created a sandbox展示了到目前为止的内容以及我上面所解释的内容。

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

 <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>

Answer 1

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

EX：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Card, Button, Icon } from "semantic-ui-react";

import "./styles.css";

function App() {
  const [expanded, setExpanded] = useState({});
  const cards = [1, 2, 3, 4, 5, 6];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Card.Group itemsPerRow={3}>
        {cards.map(cardNumber => (
          <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"
                onClick={() =>
                  setExpanded({
                    ...expanded,
                    [cardNumber]: !expanded[cardNumber]
                  })
                }
              >
                <Icon name="plus circle" />
              </Button>
              {expanded[cardNumber] && (
                <div style={{ height: 200 }}>
                  Extra content expanded for card {cardNumber}
                </div>
              )}
              Show More
            </Card.Content>
          </Card>
        ))}
      </Card.Group>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

下面是一个简短的沙箱，用于查看其外观：https://codesandbox.io/s/modest-mayer-t12ot

Answer 2

我同意@ brandon-r的观点，您可以通过处理状态对象（在我的情况下为数组）来处理显示的额外内容。我与他的示例不同的是，利用了<Card.Content extra>组件，该组件可以处理所有样式问题。

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

无论如何，这是指向我的派生CodeSandbox的链接以及我对该解决方案的看法：

https://codesandbox.io/embed/semantic-ui-card-extra-content-toggle-kybt2

我希望对您有帮助

编辑＃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>

切换div扩展语义ui卡组件

2 个答案: