React 如何优雅地实现标签页切换

2025-05-17 01:07:47
推荐回答(1个)
回答1:

bootstrap相对reactjs来说是内容而后者是框架。reactjs官方下载包里example里有和bootstrap整合的例子,所以两者不是竞争关系

'use strict';

var data = [{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}];

//Bootstrap标签项
var BootstrapNavLi = React.createClass({
  handleClick:function(){
    data=[{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}];
    data.splice(this.props.no,1);  //删除指定位置指定个数的元素
    data.splice(this.props.no,0,{name:this.props.name,active:"active",href:"#"});  //插入元素
  },
  render:function(){
    return(
       
         
          {this.props.name}
         
       
      ); 
  }
});

//Bootstrap标签页
var BootstrapNav = React.createClass({
  getInitialState: function() {
     return {data: data};
  },
  hClick:function(){  //初始化
      this.setState({data:data});
  },
  render: function(){
    var lis = this.state.data.map(function(li,index){
      return 
    });
    return (
        
          {lis}
        
      );
  }
});

//外层div,包含标题
var Box = React.createClass({
  render: function() {
    return (
      
        

React Bootstrap 标签页切换实例


        
      

    );
  }

});


React.render(, document.getElementById('example'));

相关问答