介绍

众所周知，Bootstrap是非常受欢迎的前端库，因为其美观的UI以及使用方式的简单而深受广大的前端爱好者的喜爱，但近年来各类前端框架大行其道，要想将Bootstrap尤其是其组件部分很优雅的使用到这些框架不一定很方便，在之前的文章中已经介绍过Vue的实现版本，本文就介绍以下React的版本——Reactstrap

Github

https://reactstrap.github.io/

https://github.com/reactstrap/reactstrap

快速开始

1、安装使用

通过NPM安装reactstrap和对等依赖项

npm install --save reactstrap react react-dom

2、然后导入你需要的组件

import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
 return (
 <Button color="danger">Danger!</Button>
 );
};

3、结合creat-react-app使用

npx create-react-app my-app
cd my-app
npm start

npm install --save bootstrap
npm install --save reactstrap react react-dom

然后在index.js中导入：

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

在src/App.js文件或您的自定义组件文件中导入所需的reactstrap组件：

import { Button } from 'reactstrap';

现在可以在render方法中定义的组件层次结构中使用导入的reactstrap组件

部分组件介绍

• 消息弹框

 <Alert color="primary">
 This is a primary alert — check it out!
</Alert>

替换color属性：primary、secondary、success、danger、warning、info、light、dark可实现不同效果

• 面包屑

 <div>
 <Breadcrumb tag="nav" listTag="div">
 <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
 <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
 <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
 <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
 </Breadcrumb>
 </div>

面包屑无需使用列表标记

• 按钮和按钮下拉框

• 轮播图

<Carousel
 activeIndex={activeIndex}
 next={next}
 previous={previous}
 >
 <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
 {slides}
 <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
 <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
 </Carousel>

• 表单组件

• 布局

<Container>
 <Row>
 <Col>.col</Col>
 </Row>
 <Row>
 <Col>.col</Col>
 <Col>.col</Col>
 <Col>.col</Col>
 <Col>.col</Col>
 </Row>
 <Row>
 <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
 <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
 <Col sm="4">.col-sm-4</Col>
 </Row>
 <Row>
 <Col sm={{ size: 6, order: 2, offset: 1 }}>.col-sm-6 .order-sm-2 .offset-sm-1</Col>
 </Row>
 <Row>
 <Col sm="12" md={{ size: 6, offset: 3 }}>.col-sm-12 .col-md-6 .offset-md-3</Col>
 </Row>
 <Row>
 <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
 <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
 </Row>
 </Container>

• 模态对话框

<Modal isOpen={modal} toggle={toggle} className={className} backdrop={backdrop}>
 <ModalHeader toggle={toggle}>Modal title</ModalHeader>
 <ModalBody>
 内容
 </ModalBody>
 <ModalFooter>
 <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
 <Button color="secondary" onClick={toggle}>Cancel</Button>
 </ModalFooter>
 </Modal>

• 进度条

• Tab选项卡

<TabContent activeTab={activeTab}>
 <TabPane tabId="1">
 <Row>
 <Col sm="12">
 <h4>Tab 1 Contents</h4>
 </Col>
 </Row>
 </TabPane>
 <TabPane tabId="2">
 <Row>
 <Col sm="6">
 <Card body>
 <CardTitle>Special Title Treatment</CardTitle>
 <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
 <Button>Go somewhere</Button>
 </Card>
 </Col>
 <Col sm="6">
 <Card body>
 <CardTitle>Special Title Treatment</CardTitle>
 <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
 <Button>Go somewhere</Button>
 </Card>
 </Col>
 </Row>
 </TabPane>
 </TabContent>

• Toasts

 <Toast>
 <ToastHeader>
 Reactstrap
 </ToastHeader>
 <ToastBody>
 This is a toast on a secondary background — check it out!
 </ToastBody>
</Toast>

总结

reactstrap的出现让喜欢bootstrap的小伙伴不用自己去实现一套组件了，可以直接使用reactstrap，节省了事件，提高了生产效率，enjoy it！