开放原子开发者工作坊

react-bootstrap官网：http://react-bootstrap.github.io/

react-bootstrap的样式与bootstrap基本一致，这里只说明如何加载以及如何使用它的模块的方法。

一、打开命令提示符，在react的wrokspace下安装react-bootstrap:

npm install react-bootstrap --save

 

 

二、页面加载react-bootstrap的方法：

import ReactBootstrap , {Panel,Button,SplitButton,MenuItem,handleSelect} from 'react-bootstrap';

 

说明：{Panel,Button,SplitButton,MenuItem,handleSelect}
        花括号中的 Panel,Button,SplitButton,MenuItem,handleSelect 是 ReactBootstrap 的小组件，用哪个加载哪个，不用全部加载，可以减少体积。

 

三、如何使用，比如组件Pan要用到ReactBootstrap中的Panel组件

官方提供的Panel组件代码为：title为Panel标题；panelsInstance为Panel content；

const title = (
<h3>Panel title</h3>
);

const panelsInstance = (
<div>
<Panel header={title}>
Panel content
</Panel>
</div>
);

 

//Pan组件

import React,{Component} from 'react';
import {render} from 'react-dom';
import ReactBootstrap , {Panel} from 'react-bootstrap';

export default class Pan extends Component{
//初始化state
constructor(props){
super(props);
this.state = {
title: this.props.title
}
}
render(){
//将官方的模块引入
const title = (
<h3>Panel title</h3>
);

const panelsInstance = (
<div>
<Panel header={title}> //title作为变量加载
Panel content
</Panel>
</div>
);

//return
return ( <div>
{panelsInstance}
</div>
)
}

 

转载请注明出处！