在 React Bootstrap 中自定义选项卡

2020-09-17 08:00:00 · 飞浪

在本指南中，您将学习如何通过使用 React Bootstrap 自定义选项卡将内容拆分为不同的窗格，每个窗格可供用户一次查看一个。

介绍

在前端开发中，开发人员必须构建一个以用户体验 (UX) 为核心的用户界面 (UI)。借助 Bootstrap 选项卡，React 开发人员可以通过将内容拆分为不同的窗格来实现这一点，每个窗格一次只能供一个用户查看。在创建需要用户批准才能导航到下一个选项卡的步进式组件时，这种方法非常有用。这也是一种 UX 技术，可将信息显示在单独的窗格中，而不是一大段文字中。这使网站看起来更有条理。

假设你是一名 React 开发人员，正在设计自己的作品集网站。你想以最有条理的方式显示你的信息，并选择了三个选项卡。第一个显示工作经历（个人资料页面），第二个显示教育和学术历史（主页），第三个显示你的联系信息（联系页面）。

在本指南中，您将学习如何使用 React.js 通过 React Bootstrap 自定义选项卡。本指南假设您具有 React.js 的基本知识。

设置示例应用程序

打开你的终端并运行这些命令来创建一个基本的 React 应用程序。

      npx create-react-app react-bootstrap-tabs

cd react-bootstrap-tabs

npm start

在你的基本 React 应用程序中包括 React Bootstrap。

      npm install react-bootstrap bootstrap

删除新创建的App.js文件中的代码，并粘贴下面的示例代码。

      import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }

}


export default App;
    

在您的app.js文件中，也包含样式表。

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

您现在可以导入 Bootstrap 组件，例如：

      import { Button } from 'react-bootstrap';
    

设置标签

在下面的示例代码中，您将创建三个单独的选项卡，每个窗格中的内容不同。每个窗格将是一个 React 组件。然后，您将从 React Bootstrap 添加选项卡组件。如果您的代码出现错误，请记得导入组件。

      import React, {Component} from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Tabs, Tab, Modal, Row, Button, Col, Form, Card, Container} from "react-bootstrap";
 
 class App extends Component{
     constructor(props) {
         super(props);
       
     }
 
     render() {
         return (
             <Container>
                 <Row>
                     <Col>
                         <Tabs defaultActiveKey="Home" 
                               id="controlled-tab-example">
                             <Tab eventKey="home" title="Home">
                                 <Home />
                             </Tab>
                             <Tab eventKey="profile" title="Profile">
                                 <Profile />
                             </Tab>
                             <Tab eventKey="contact" title="Contact" disabled>
                                 <Contact />
                             </Tab>
                         </Tabs>
                     </Col>
                 </Row>
             </Container>
         );
     }
 }
 
 export default App;
    

在上面的代码中，您有一个tabs组件，其中设置了defaultActiveKey，用于在页面加载时首先加载Home组件。在Tabs组件内部，有加载不同窗格的选项卡。eventkey检查要加载哪个选项卡。

现在创建三个单独的 React 组件，它们将添加到主App.js文件中。在根文件夹中创建三个文件，分别名为Home.js、Profile.js和Contact.js。复制下面的示例代码。

      import React, {Component} from "react";

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


class Home extends  Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                This is my Home Page
            </div>
        );
    }

}
export default Home;
    

配置文件组件。

      import React, {Component} from "react";

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


class Profile extends  Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                This is my Profile Page
            </div>
        );
    }

}
export default Profile;
    

联系组件。

      import React, {Component} from "react";

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


class Contact extends  Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <div>
                This is my Contact Page
            </div>
        );
    }

}
export default Contact;
    

您可能会在App.js文件中遇到错误。您的组件已初始化，但您的App.js文件不知道您的组件在哪里。将这些行添加到您的App.js以导入您的组件。

      import Home from "./Home";
import Profile from "./Profile";
import Contact from "./Contact";
    

现在，您已拥有一个功能齐全且带有标签的 React 应用。单击每个标签时，将显示一个包含不同信息的不同窗格。

结论

在本指南中，您已使用 React.js 和 React Bootstrap 开发了自定义选项卡。这些知识对于前端开发人员和 React 开发人员职位至关重要。在网站中使用选项卡可以整合信息，从而实现更好的用户体验。

为了进一步了解本指南，请从官方网站了解有关 React Bootstrap 组件的更多信息。

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

_查看原文

技术指南

阅读全文

在 React Bootstrap 中自定义选项卡

杭州电子商务研究院

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

import React, {Component} from 'react'; class App extends Component{ constructor(props) { super(props); } render() { return ( <div> </div> ); } } export default App;

import React, {Component} from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import {Tabs, Tab, Modal, Row, Button, Col, Form, Card, Container} from "react-bootstrap"; class App extends Component{ constructor(props) { super(props); } render() { return ( <Container> <Row> <Col> <Tabs defaultActiveKey="Home" id="controlled-tab-example"> <Tab eventKey="home" title="Home"> <Home /> </Tab> <Tab eventKey="profile" title="Profile"> <Profile /> </Tab> <Tab eventKey="contact" title="Contact" disabled> <Contact /> </Tab> </Tabs> </Col> </Row> </Container> ); } } export default App;

import React, {Component} from "react"; import 'bootstrap/dist/css/bootstrap.min.css'; class Home extends Component{ constructor(props) { super(props); } render() { return ( <div> This is my Home Page </div> ); } } export default Home;

import React, {Component} from "react"; import 'bootstrap/dist/css/bootstrap.min.css'; class Profile extends Component{ constructor(props) { super(props); } render() { return ( <div> This is my Profile Page </div> ); } } export default Profile;

import React, {Component} from "react"; import 'bootstrap/dist/css/bootstrap.min.css'; class Contact extends Component{ constructor(props) { super(props); } render() { return ( <div> This is my Contact Page </div> ); } } export default Contact;