上一篇我们谈了谈如何配置react的webpack环境
react入门之搭配环境（一）
可能很多人已经打开过官方文档学习了react的基础知识
不管有没有，在介绍react之前，我想先介绍一下react-bootstrap
先懂得使用别人造的轮子，就能更快成为老司机。
好的，源代码奉上：
git clone https://github.com/lingjiawen/react_bootstrap_demo.git cd react_bootstrap_demo npm install npm run dev
打开浏览器输入：localhost:8080
react-bootstrap官方网址
现在就让我们来看看它能干什么吧！
一、Button
使用Button声明一个按钮，bsSize有如下四个属性，可以分别有大、中、小、超小四种大小的按钮，再用ButtonToolbar包裹起来
使用效果如下：
使用well将按钮包裹起来，可以实现如下效果：（well在后面介绍）
使用 bsStyle属性可以调整按钮的状态颜色：
下图bsStyle属性分别为：info、warning、danger、link
使用按钮实现点击loading，等待结果的功能：
点击之后会变为loading...，可以自己点击一下
class LoadingButton extends React.Component{
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { isLoading: false }
}
handleClick() {
this.setState({isLoading: true});
// This probably where you would have an `ajax` call
setTimeout(() => {
// Completed of async action, set loading state back
this.setState({isLoading: false});
}, 2000);
}
render() {
let isLoading = this.state.isLoading;
return (
);
}
}
实现按钮的下拉和上拉：
在title中使用Dropdown属性，用DropdownButton包裹下拉,使用Dropup为上拉
//下拉//上拉
二、List
简单列表：
Link 1
Link 2
Link 3
使用ListGroup包裹， ListGroupItem就是它的子元素
表格：
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
可以点击隐藏的面板：
class CollapsiblePanel extends React.Component {
constructor(props) {
super(props);
this.state = {
open: true
};
}
render() {
return (
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
);
}
}
三、Overlays
点击弹出的窗口：
class StaticMarkup extends React.Component {
constructor(props) {
super(props);
this.state = {dpName:false};
this.OnDisplayOverlays= this.onDisplayOverlays.bind(this);
this.OnCloseOverlays= this.onCloseOverlays.bind(this);
}
onDisplayOverlays() {
this.setState({
dpName:true
});
}
onCloseOverlays() {
this.setState({
dpName:false
});
}
render() {
if(this.state.dpName)
return (
Modal title
One fine body...
);
else
return (
);
}
}
以及点击显示、隐藏的overload
class CustomOverlays extends React.Component{
constructor(props) {
super(props);
this.state = {show: true};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({ show: !this.state.show });
}
render() {
const sharedProps = {
show: this.state.show,
container: this,
target: () => ReactDOM.findDOMNode(this.refs.target)
};
return (
Tooltip overload!
Tooltip overload!
Tooltip overload!
Tooltip overload!
);
}
}
四、轮播
class CarouselInstance extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
);
}
}
五、一些有用的图标
class MiscellaneousInstance extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Label
Label
Label
Label
Label
Label
);
}
}
六、表单
表单基础的类函数为：
function FieldGroup({ id, label, help, props }) {
return (
{label}
{help && {help} }
);
}
然后使用FieldGroup包裹：
便可以轻松实现表单！如果你对react有了解，便知道原生的表单是不能直接用的。这个组件简化了许多，但我没用实际用过，所以不知道效果如何。
我写的这些只是抛砖引玉，只是希望大家稍微了解到react-bootstrap大概能做的事
更详细的方法和属性请进入官方网址浏览文档，打开源代码自行研究
有些官方demo没有给完全，可以运行前面的我给的demo，再查看源代码理解（不过我也没有写全，而且结构比较乱）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 