写了个react的选项卡切换,但是有个小问题,求大神帮忙

#1
var delectItem = 'delectItem';
var TabBody=React.createClass({
  
  getInitialState: function(){
    return {nowIndex: 0}
  },
  componentDidMount:function(){
    PubSub.subscribe(delectItem,function (evName,data){

      console.log(data)/////这边点击一次能传3个同样的index过来,这个能优化么?

      this.setState({nowIndex:data});
      
    }.bind(this))
  },
  render:function(){
    var This=this;
    return (
      <div id={"content"}>
        {
          this.props.data.map(function(item,index){
            if(index==This.state.nowIndex){
              return <div key={index} style={{display:"block"}}>{item.content}</div>
            }else{
              return <div key={index}>{item.content}</div>
            }
            
          })
        }
      </div>
    )
  }
})
var TabHead=React.createClass({
  getInitialState: function(){
    return {currentIndex: 0}
  },
  delectHandle:function (index){
    PubSub.publish(delectItem,this.state.currentIndex); 
    return index==this.state.currentIndex?"active":"";
  },
  
  render:function(){
    var This=this;
    return (
      <ul>
        {
          this.props.data.map(function(item,index){
            return <li key={index} onClick={() => {This.setState({currentIndex: index})}} className={This.delectHandle(index)}>{item.head}</li>
          })
        }
      </ul>
    )
  }
})
var Tab=React.createClass({
  render:function(){
    return(
      <div>
        <TabHead data={this.props.data}/>
        <TabBody data={this.props.data}/>
      </div>
    )
  }
})
var data=[
  {
    head:1,
    content:"a"
  },
  {
    head:2,
    content:"b"
  },
  {
    head:3,
    content:"c"
  }
]
ReactDOM.render(
  <Tab data={data}/>,
  document.getElementById("tab")
)
#2

不建议用 tab, 太难看了.

没看懂问的是什么问题…

#3

拜托,先对对齐再发出来。看得欲望都没有!

还不用es6来写,更懒得看

什么问题也不说,别人怎么帮

#4

非常抱歉,那我明天截个图传上来,可能大家看的清楚点,我不知道怎么考贝成这样的。。不好意思

#5

非常抱歉,那我明天截个图传上来,可能大家看的清楚点,我不知道怎么考贝成这样的。。不好意思,还有里面有es6写法,不过我才学es6,能写的不是很多,让你看的这么生气真是抱歉了

#6

编译一下把所有的 tab 替换成两个空格就好了, 我帮你操作吧

#8

感谢,下次问问题一定注意!

#9

求大神帮忙看下啊