reactjs - 在 Modal React Bootstrap 中将一张卡链接到另一张卡

Question

我正在尝试实现这个:

位于模态框内的 Accordion 内的卡片，该卡片有一个按钮，单击该按钮时应转到下一张卡片。

我最多可以有 10 个这样的东西，那么在这种情况下我该如何让它发挥作用呢？更重要的是，我试图添加某种链接功能，例如如何将页面与react-router-dom链接，但在react-bootstrap的模态中。

<强> Link to CodeSandbox

这是位于模态中的 Accordion ，卡片中带有 Age 按钮。

当您点击上一张图片中的Age时，它应该会打开类似下一张图片的内容，该图片也必须位于相同的Modal中:

这是 Accordion 的示例，它位于 Modal 中:

const AccordionModal = () => {
  return (
    <Accordion>
      <Card>
        <Card.Header>
          <Accordion.Toggle as={Button} variant="light" eventKey="0">
            Basic Preprocessing Variables
          </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <Button variant="primary">Age</Button>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
      <Card>
   </Accordion>
  )
}

Answer 1

在事件中返回组件不会呈现该组件。

这里有两种方法，您可以在 this sandbox 中找到。 .

在组件级别，您可以切换一个 bool 值，有条件地显示 <Sample />不过组件。

参见conditional rendering和 useState .

import { useState } from "react";
import { Button, Card } from "react-bootstrap";

const ExpandableCard = ({ label, children, ...rest }) => {
  const [expanded, setExpanded] = useState(false);

  return (
    <Card.Body {...rest}>
      <Button variant="primary" onClick={() => setExpanded(true)}>
        {label}
      </Button>
      {expanded && children}
    </Card.Body>
  );
};

如果您不想在组件级别执行此操作，则可以将可见索引数组保留在状态中。

import { useState } from "react";
import { Button, Card } from "react-bootstrap";

const cards = [
  {
    label: 'Card1',
    content: () => <p>Card1 (Content)</p>
  },
  {
    label: 'Card2',
    content: () => <p>Card2 (Content)</p>
  }
]

const ExpandableCardList = () => {
  const [expandedSections, setExpandedSections] = useState([]);

  const handleClick = (index) => {
    if (expandedSections.includes(index)) return;
    setExpandedSections((prevSections) => [...prevSections, index]);
  };
  
  return cards.map(({ label, content: ExpandedContent }, index) => (
    <Card.Body key={index}>
      <Button variant="primary" onClick={() => handleClick(index)}>
        {label}
      </Button>
      {expandedSections.includes(index) && <ExpandedContent />}
    </Card.Body>
  ));
};