Javascript React jsx第一个选项卡在切换后中断

目前正在reactjs中构建应用程序，遇到了一个奇怪的问题。JSX代码如下（抱歉有点冗长）：

var NavigationTab=React.createClass({
onClick:function（）{
console.log（'NT'+this.props.tab.index）；
this.props.onTabClick（this.props.tab.index）；
},
渲染：函数（索引）{
返回(


)
}
});
var NavigationPanel=React.createClass({
getInitialState:函数（）{
返回{
};
},
onTabClick:函数（选项卡）{
//控制台日志（i）；
this.setState（{active:tab}）；
此.props.showTab（选项卡）；
},
render:function（）{
var self=这个；
var tabs=this.props.tabs.map（函数（项、索引）{
item.index=索引；
返回；
});      
返回(

{tabs}

);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
选项卡：[
{title:'test'，ref:'test'，content:test}，
{标题：'Dasboard'，参考：'dashboard'，内容：home}，
{title:'Settings'，ref:'Settings'，content:Settings}，
{title:'Logout'，ref:'Logout'，content:Logout}
],
activeTab:0}；
},
showTab:函数（索引）{
console.log（'AP'+索引）；
this.setState（{activeTab:index}）；
},
render:function（）{
log（'AP'+this.state.activeTab）；
console.log（'AP'+this.state.tabs[this.state.activeTab].title]；
返回(
{this.state.tabs[this.state.activeTab].content}/*[1]*/
);
}
});

更改选项卡后，第一个选项卡“测试”将不再显示

如果我将

/*[1]*/

处的行更改为

{this.state.tabs[this.state.activeTab].ref}

它将按预期工作

---

下面是一个

在旧版本的React中，您无法重用组件描述符，需要在多次渲染组件描述符时重新创建它们。您的代码在React 0.11中运行良好

var NavigationTab = React.createClass({
  onClick: function() {   
    console.log('NT' + this.props.tab.index); 
    this.props.onTabClick(this.props.tab.index);
  },
  render: function(index){
    return (
      <li>
      <a href="#" onClick={this.onClick} className='navigation-tab'> {this.props.tab.title} </a>
      </li>
    )
  }
});

var NavigationPanel = React.createClass({
  getInitialState: function() {
    return {

    };
  },
  onTabClick: function(tab) {       
    //console.log(i) ;
    this.setState({active : tab});
    this.props.showTab(tab);
  },
  render: function() {      
      var self = this;
      var tabs = this.props.tabs.map(function(item, index){
        item.index = index;
        return <NavigationTab tab={item} onTabClick={self.onTabClick} />;
      });      
      return (
        <div id='navigation-panel' className='col-xs-2'>
          <ul className='nav nav-pills nav-stacked'>
          {tabs}
          </ul>
        </div>
    );
  }
});


var App = React.createClass({
  getInitialState: function() {
    return {      
      tabs: [
        {title: 'test', ref: 'test', content: <div> test </div>},
        {title: 'Dasboard', ref: 'dashboard', content: <div> home </div>},
        {title: 'Settings', ref: 'settings', content: <div> settings </div>},
        {title: 'Logout', ref: 'logout', content: <div> logout </div>}
      ],
      activeTab: 0};
  },
  showTab : function(index) {       
    console.log('AP ' + index); 
    this.setState({activeTab : index});        
  },
  render: function() {
    console.log('AP ' + this.state.activeTab);
    console.log('AP ' + this.state.tabs[this.state.activeTab].title);
    return (
      <div id="container">          
        <NavigationPanel showTab={this.showTab} tabs={this.state.tabs} />               
        <div id="content-body">          
          {this.state.tabs[this.state.activeTab].content} /* [1] */
        </div>
      </div>
    );
  }
});