在模态反应引导程序中将一张卡链接到另一张卡

Question

我正在尝试实现这个：

在 Modal 内的 Accordion 中的卡片，该卡片有一个按钮，当点击它时会指向下一张卡片。

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

Link to CodeSandbox

这是手风琴，它位于模态中，卡片中带有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找到。

在组件级别，您可以切换一个布尔值，以有条件地显示 <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>
  ));
};

Answer 2

我的想法是将所有状态保留在 ModalFormTest（父）组件中，并使用 switch 语句有条件地渲染子组件，同时利用 react-bootstrap 中的 Pagination component > 用于导航。一般来说，它可能看起来像这样：

const ModalFormTest = ({ show, handleClose }) => {
  const [page, setPage] = React.useState(1);
  const [age, setAge] = React.useState(null);

  const renderComponent = () => {
    switch (page) {
      case 1:
        return <AccordionModal changePage={(value) => setPage(value)} />;

      case 2:
        return (
          <input
            value={age}
            type="number"
            onChange={(e) => setAge(e.target.value)}
          />
        );
    }
  };
  return (
    <>
      <Modal
        size="lg"
        show={show}
        onHide={handleClose}
        aria-labelledby="example-modal-sizes-title-lg"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-lg">
            Custom Preprocessing
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {renderComponent()}
          <Pagination>
            <Pagination.First onClick={() => setPage(1)} />
            <Pagination.Prev
              onClick={() =>
                setPage((prev) => {
                  if (prev != 1) {
                    return prev - 1;
                  }
                })
              }
            />
            <Pagination.Item onClick={() => setPage(1)}>{1}</Pagination.Item>
            <Pagination.Item onClick={() => setPage(2)}>{2}</Pagination.Item>
            <Pagination.Next
              onClick={() =>
                setPage((prev) => {
                  if (prev != 2) {
                    return prev + 1;
                  }
                })
              }
            />
            <Pagination.Last onClick={() => setPage(2)} />
          </Pagination>
        </Modal.Body>
      </Modal>
    </>
  );
};

export default ModalFormTest;

因此，用户在四处导航时永远不会丢失状态。您可以在switch 语句中逐步添加组件，并在Navigation 组件中添加map，以避免过多的代码重复。

我分叉了你的沙箱，并用我的方法 here 对其进行了修改。

Answer 3

在您的表单中，您可以为所有页​​面和状态创建某种类型的持有人，以确保显示正确的页面。我将最重要的代码部分放在答案中，但是这个sandbox 也应该是帮助。

// inside <ModalFormTest/>
  const [page, setPage] = useState(0);

  const handleNextPage = () => setPage(page + 1);

  const sections = [
    <AccordionModal key={0} onNextPage={handleNextPage} />,
    <NextSection key={1} onNextPage={handleNextPage}>
      I am the 2 page
    </NextSection>,
    /* and others */
    <NextSection key={9}>I am the last one</NextSection>
  ];

  <Modal.Body>{sections[page]}</Modal.Body>

// inside AccordionModal
const AccordionModal = (onNexPage) => { 

...

<Button variant="primary" onClick={onNextPage}>Age</Button>

// inside NextSection component
const NextSection = ({ onNextPage, children }) => {
  return (
    <div>
      <p>{children}</p>
      <Button onClick={onNextPage}>Next</Button>
    </div>
  );
};


  [1]: https://codesandbox.io/s/magical-worker-3qmo5?fontsize=14&hidenavigation=1&theme=dark