react-bootstrap 加载以及如何使用模块

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>
) }

 

转载请注明出处！