如何在 react-bootstrap 中打开多个 Accordion 标签？

Question

如果可能的话，我想打开多个Accordion。目前使用的是 react-bootstrap 库。

以下是我的实现。

<Accordion>
              {data.rows.map((item, index) => {
                return (
                  <Card
                    style={{
                      border: "none",
                      marginTop: "1em",
                      borderBottom: "1px solid #f1f1f1",
                    }}
                  >
                    <Card.Header
                      style={{ background: "transparent", padding: "0.75em 0" }}
                    >
                      <Row>
                        <Col lg="10" sm xs="9" style={{ alignSelf: "center" }}>
                          <p
                            className="cardtitle"
                            style={{ fontWeight: "600" }}
                          >
                            {item.title}
                          </p>
                        </Col>
                        <Col style={{ textAlign: "right" }} xs sm>
                          {" "}
                          <ContextAwareToggle eventKey={index}>
                            +
                          </ContextAwareToggle>
                        </Col>
                      </Row>
                    </Card.Header>
                    <Accordion.Collapse eventKey={index}>
                      <Card.Body>
                        <p className="cardcontent">{item.content}</p>
                      </Card.Body>
                    </Accordion.Collapse>
                  </Card>
                );
              })}{" "}
            </Accordion>

...


function ContextAwareToggle({ children, eventKey, callback }) {
  const currentEventKey = useContext(Fifth);

  const decoratedOnClick = useAccordionToggle(
    eventKey,
    () => callback && callback(eventKey)
  );

  const isCurrentEventKey = currentEventKey === eventKey;
  console.log(currentEventKey);
  return (
    <button
      type="button"
      className="accordianButton"
      // style={{ backgroundColor: isCurrentEventKey ? "pink" : "lavender" }}
      style={{
        backgroundColor: "transparent",
        fontSize: "1.8em",
        fonWeight: "700",
        border: "transparent",
        color: "green",
      }}
      onClick={decoratedOnClick}
    >
      {isCurrentEventKey ? "-" : "+"}
    </button>
  );
}

以下是我得到代码参考的链接。https:/react-bootstrap.github.iocomponentsaccordion。

另外，如果不是手风琴，那么请建议使用其他组件。一直试图在我的项目中创建一个FAQ模板。

谢谢你的建议

Answer 1

Accordion组件设计为一次展开一张卡片。要实现多个标签打开的效果，需要使用多个Accordion这样的组件。

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

const tabs = [
  { id: 1, label: "Tab 1", description: "Content of Tab 1" },
  { id: 2, label: "Tab 2", description: "Content of Tab 2" },
  { id: 3, label: "Tab 3", description: "Content of Tab 3" }
];

export default function App() {
  return (
    <div className="App">
      {tabs.map(tab => (
        <Accordion key={tab.id} defaultActiveKey={tab.id}>
          <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey={tab.id}>
                {tab.label}
              </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey={tab.id}>
              <Card.Body>{tab.description}</Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>
      ))}
    </div>
  );
}

下面是一个代码沙盒 https:/codesandbox.iosreact-bootstrap-multiple-accordion-tabs-oboks。