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

 

轉載請注明出處！