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> ) }
转载请注明出处!