上一章ReactJS实战教程请查看:React使用动画组件
在过去的几年里,单页应用程序越来越受欢迎,因此许多前端框架被引入,如Angular、React和Vue.js、Ember等等。因此,jQuery不是构建web应用程序的必要条件。如今,React拥有最常用的JavaScript框架来构建web应用程序,Bootstrap也成为最流行的CSS框架。因此,有必要学习Bootstrap在React应用中使用的各种方式,这也是本节的主要目的。
React添加Bootstrap
我们可以通过几种方式向React应用程序添加bootstrap,以下是三种最常见的方法:
- 使用bootstrap CDN
- 将bootstrap作为一个依赖
- 使用react bootstrap包
使用Bootstrap CDN
这是向React应用程序添加Bootstrap的最简单方式,无需安装或下载Bootstrap。我们可以简单地将一个<link>放入React应用程序的index.html文件的<head>部分,如下面的代码片段所示。
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
如果需要在React应用程序中使用依赖于JavaScript/jQuery的Bootstrap组件,我们需要包含jQuery、Popper.js和Bootstrap。在index.html文件的结束标记标记附近的
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
在上面的代码片段中, 我们使用jQuery的min版本, 尽管我们还可以使用完整版本。现在Bootstrap已经成功加入到React应用程序中,我们可以在React项目中使用所有Bootstrap中可用的CSS工具和UI组件。
将bootstrap作为react项目依赖
如果我们使用构建工具或一个模块打包器如Webpack,那么可以导入bootstrap作为依赖项添加到React应用程序中。我们可以安装Bootstrap作为React应用程序的依赖项,在终端窗口中运行以下命令。
$ npm install bootstrap --save
一旦安装了Bootstrap,我们就可以将其导入到React应用程序条目文件中。如果使用create-react-app工具创建React项目,请打开src/index.js文件,并添加以下代码
import 'bootstrap/dist/css/bootstrap.min.css';
现在,我们可以在React应用程序中使用CSS类和实用工具。另外,如果我们想使用JavaScript组件,我们需要安装来自npm的jquery和popper.js包。要安装以下软件包,请在终端窗口中运行以下命令。
$ npm install jquery popper.js
接下来,转到src/index.js文件并添加以下导入。
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
现在,我们可以在React应用程序中使用Bootstrap JavaScript组件。
使用React Bootstrap包
React Bootstrap包是在React应用程序中添加Bootstrap的最流行方法。有许多由社区构建的Bootstrap包,它们旨在将Bootstrap组件重新构建为React组件。两个最流行的Bootstrap包是:
- React-Bootstrap:它是一个完整的重新实现的Bootstrap组件,作为React组件,它不需要任何依赖,如bootstrap.js或jQuery。如果安装了React setup和React-bootstrap,我们就有了所有需要的东西。
- reactstrap:它是一个包含React Bootstrap 4个组件的库,支持组合和控制。它不依赖于jQuery或引导JavaScript。但是,对于高级的内容定位,如工具提示、弹出窗口和自动翻转下拉菜单,需要使用react-proper。
React Bootstrap安装
让我们使用create-react-app命令创建一个新的React应用程序,如下所示。
$ npx create-react-app react-bootstrap-app
创建React应用程序后,安装Bootstrap的最佳方式是通过npm包。要安装引导程序,请导航到React app文件夹,并运行以下命令。
$ npm install react-bootstrap bootstrap --save
导入Bootstrap
现在,打开src/index.js文件并添加以下代码来导入Bootstrap文件。
import 'bootstrap/dist/css/bootstrap.min.css';
我们还可以导入个别组件,如import {SplitButton, Dropdown} from ‘react-bootstrap’;而不是整个库。它提供了我们需要使用的特定组件,并且可以显著减少代码量。
在React应用程序中,在src目录中创建一个名为ThemeSwitcher.js的新文件,并放入以下代码。
import React, { Component } from 'react';
import { SplitButton, Dropdown } from 'react-bootstrap';
class ThemeSwitcher extends Component {
state = { theme: null }
chooseTheme = (theme, evt) => {
evt.preventDefault();
if (theme.toLowerCase() === 'reset') { theme = null }
this.setState({ theme });
}
render() {
const { theme } = this.state;
const themeClass = theme ? theme.toLowerCase() : 'default';
const parentContainerStyles = {
position: 'absolute',
height: '100%',
width: '100%',
display: 'table'
};
const subContainerStyles = {
position: 'relative',
height: '100%',
width: '100%',
display: 'table-cell',
};
return (
<div style={parentContainerStyles}>
<div style={subContainerStyles}>
<span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>
<div className="center-block text-center">
<SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>
<Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>
<Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>
<Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>
<Dropdown.Item divider />
<Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>
</SplitButton>
</div>
</div>
</div>
);
}
}
export default ThemeSwitcher;
现在,使用以下代码片段更新src/index.js文件。
Index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './index.css';
import ThemeSwitcher from './ThemeSwitcher';
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));
使用reactstrap
让我们使用create-react-app命令创建一个新的React应用程序,如下所示。
$ npx create-react-app reactstrap-app
接下来,通过npm包安装reactstrap,要安装reactstrap,请导航到React app文件夹,并运行以下命令。
$ npm install bootstrap reactstrap --save
导入Bootstrap
现在,打开src/index.js文件并添加以下代码来导入Bootstrap文件。
import 'bootstrap/dist/css/bootstrap.min.css';
我们也可以从“reactstrap”中导入单独的组件,如import {Button, Dropdown} from ‘reactstrap’;而不是整个库。它提供了我们需要使用的特定组件,并且可以显著减少代码量。
在React应用程序中,在src目录中创建一个名为ThemeSwitcher.js的新文件,并放入以下代码。
import React, { Component } from 'react';
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
class ThemeSwitcher extends Component {
state = { theme: null, dropdownOpen: false }
toggleDropdown = () => {
this.setState({ dropdownOpen: !this.state.dropdownOpen });
}
resetTheme = evt => {
evt.preventDefault();
this.setState({ theme: null });
}
chooseTheme = (theme, evt) => {
evt.preventDefault();
this.setState({ theme });
}
render() {
const { theme, dropdownOpen } = this.state;
const themeClass = theme ? theme.toLowerCase() : 'secondary';
return (
<div className="d-flex flex-wrap justify-content-center align-items-center">
<span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span>
<ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}>
<Button id="caret" color={themeClass}>{theme || 'Custom'} Theme</Button>
<DropdownToggle caret size="lg" color={themeClass} />
<DropdownMenu>
<DropdownItem onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</DropdownItem>
<DropdownItem onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</DropdownItem>
<DropdownItem onClick={e => this.chooseTheme('Success', e)}>Success Theme</DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
);
}
}
export default ThemeSwitcher;
现在,使用以下代码片段更新src/index.js文件。
Index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import './index.css';
import ThemeSwitcher from './ThemeSwitcher';
ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));
评论前必须登录!
注册