将 Bootstrap Accordion 与 React 结合使用

2020-11-19 08:00:00 · 飞浪

介绍手风琴可用于创建选项卡式元素，并根据可折叠选项卡隐藏/显示内容，然后是其子内容元素。React没有自己的一组元素可以集成到React组件中。因此，您需要使用一些流行且常用的库，例如

介绍

手风琴可用于创建选项卡式元素，并根据可折叠选项卡隐藏/显示内容，然后是其子内容元素。React 没有自己的一组元素可以集成到 React 组件中。因此，您需要使用一些流行且常用的库，例如为 React 应用程序提供引导元素的react-bootstrap 。

使用react-bootstrap，有一个名为<Accordion>的元素允许您根据点击事件切换内容。本指南将介绍实现方法。

开始使用 react-bootstrap Accordion

React-Bootstrap 包含各种可插入并用于 React 应用程序的 bootstrap 组件。这同样适用于 accordion；可以从库中导入库的一部分并在组件中使用。

在使用任何组件之前，您需要使用以下 NPM 命令进行安装。

      npm install react-bootstrap
npm install bootstrap
    

安装上述两个库后，下一步是将 bootstrap CSS 导入到 React 应用程序的根文件即index.js中。

      import "bootstrap/dist/css/bootstrap.min.css";

现在您可以将任何react-bootstrap组件使用到您的 React 应用程序中。

在 React 组件中集成 Accordion

在react-bootstrap配置完成后，下一步就是提取 accordion 组件并进行配置。你可以像这样导入 accordion 组件：

      import { Accordion } from "react-bootstrap";
    

手风琴组件作用于两种不同的元素：切换元素和可折叠元素。

切换元素

要启用扩展操作，您需要有一个可供用户点击的元素，并且根据切换效果，相应的子内容将可见。

为此，有一个元素可用于实现下面的切换。

      <Accordion.Toggle as={Card.Header} eventKey="0">
    TAB 1
</Accordion.Toggle>
    

表示切换元素的行为可以是任何东西，例如按钮，链接或卡片标题。

eventKey标识每个切换元素，以便在用户点击标题时展开相应的元素。

可折叠元素

一旦用户点击<Accordion.Toggle>元素，相应的子内容就会展开并显示在 DOM 中；因此需要额外的配置。

要展开，可以使用<Accordion.Toggle>。要以同样的方式折叠，还有另一个名为<Accordion.Collapse>的元素。

      <Accordion.Collapse eventKey="0">
    <Card.Body>This is first tab body</Card.Body>
</Accordion.Collapse>
    

附加一个 prop，eventKey用于查找 DOM 的特定组件并使用每个可折叠元素呈现关联的子元素内容。

下面是完整的代码，展示了 Accordion 的完整实现。

      import React, { Component } from "react";
import { Accordion, Card } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export class Example1 extends Component {
    render() {
        return (
            <>
                <div>
                    <Accordion>
                        <Card>
                            <Accordion.Toggle as={Card.Header} eventKey="0">
                                TAB 1
                            </Accordion.Toggle>

                            <Accordion.Collapse eventKey="0">
                                <Card.Body>This is first tab body</Card.Body>
                            </Accordion.Collapse>
                        </Card>

                        <Card>
                            <Accordion.Toggle as={Card.Header} eventKey="1">
                                TAB 2
                            </Accordion.Toggle>

                            <Accordion.Collapse eventKey="1">
                                <Card.Body>This is second tab body</Card.Body>
                            </Accordion.Collapse>
                        </Card>
                    </Accordion>
                </div>
            </>
        );
    }
}

export default Example1;
    

在上面的例子中，两个可折叠的手风琴被父元素<Accordion>包裹。一个可折叠的手风琴是eventkey=”0”，另一个是eventkey=”1”。一旦点击任何一个手风琴，就会识别出匹配的事件键，并且其子内容将对用户可见。

您可以根据需要配置多个手风琴，并设置 prop eventKey，用于识别相应的可折叠内容。

如何默认打开任何手风琴

页面呈现后，您可能需要默认打开任何手风琴面板，因此有一个名为defaultActiveKey的附加属性。

您可以定义所需折叠手风琴的默认键以使其可见，如下所示。

      <Accordion defaultActiveKey="2">
    ...
</Accordion>
    

使用上述配置，第三个手风琴将默认展开，因为您已将默认活动键定义为2。

结论

当用户界面需要折叠并能够在需要时利用网页空间扩展内容时，手风琴是最佳选择。

除了react-bootstrap ，你还可以根据 UI 规范和需求尝试其他第三方库（如material-ui）中的accordion，以有效地显示所需的内容。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将 Bootstrap Accordion 与 React 结合使用

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React, { Component } from "react"; import { Accordion, Card } from "react-bootstrap"; import "bootstrap/dist/css/bootstrap.min.css"; export class Example1 extends Component { render() { return ( <> <div> <Accordion> <Card> <Accordion.Toggle as={Card.Header} eventKey="0"> TAB 1 </Accordion.Toggle> <Accordion.Collapse eventKey="0"> <Card.Body>This is first tab body</Card.Body> </Accordion.Collapse> </Card> <Card> <Accordion.Toggle as={Card.Header} eventKey="1"> TAB 2 </Accordion.Toggle> <Accordion.Collapse eventKey="1"> <Card.Body>This is second tab body</Card.Body> </Accordion.Collapse> </Card> </Accordion> </div> </> ); } } export default Example1;