详解react使用react-bootstrap当轮子造车

上一篇我们谈了谈如何配置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包裹起来

        
          Large button
          Large button
        
        
          Default button
          Default button
        
        
          Small button
          Small button
        
        
          Extra small button
          Extra small button
        

使用效果如下：

使用well将按钮包裹起来，可以实现如下效果：（well在后面介绍）

   Block level button
   Block level button

使用 bsStyle属性可以调整按钮的状态颜色：

Default
Primary
Success

下图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 (
      
        {isLoading ? 'Loading...' : 'Loading state'}
      
    );
  }
}

 实现按钮的下拉和上拉：

在title中使用Dropdown属性，用DropdownButton包裹下拉,使用Dropup为上拉

//下拉

  1
  2
  
     Dropdown link
     Dropdown link
  


//上拉

  
    Action
    Another action
    Something else here
    
    Separated link
  

二、List

简单列表：

        
          Link 1
          Link 2
          Link 3
        

使用ListGroup包裹， ListGroupItem就是它的子元素

• active：已选中
• disable：可以取消它的点击事件

表格： 

    　　　　　　

          

          

            
#
            
First Name
            
Last Name
            
Username
          
          
          

          

            
1
            
Mark
            
Otto
            
@mdo
          
          

            
2
            
Jacob
            
Thornton
            
@fat
          
          

            
3
            
Larry the Bird
            
@twitter
          
          
        
  

可以点击隐藏的面板： 

class CollapsiblePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
  }

  render() {
    return (
      

         this.setState({ open: !this.state.open })}>
          点我隐藏/显示
        
        
          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...
              

              
                Close
                Save changes
              

            
          
        
      );
    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 (
      

        
          Click me!
        

        
          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 (
      

        

          
            
              
              
              
              
            
          
          
            
               Star
               Star
               Star
               Star
            
          
        
        

          
Label New
          
Label New
          
Label New
          
Label New
          
Label New
          
Label New
        
      
    );
  }
}

六、表单

表单基础的类函数为：

function FieldGroup({ id, label, help, props }) {
  return (
    
      {label}
      
      {help && {help}}
    
  );
}

然后使用FieldGroup包裹：

便可以轻松实现表单！如果你对react有了解，便知道原生的表单是不能直接用的。这个组件简化了许多，但我没用实际用过，所以不知道效果如何。

我写的这些只是抛砖引玉，只是希望大家稍微了解到react-bootstrap大概能做的事

更详细的方法和属性请进入官方网址浏览文档，打开源代码自行研究

有些官方demo没有给完全，可以运行前面的我给的demo，再查看源代码理解（不过我也没有写全，而且结构比较乱）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。