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

Question

目前在reactjs中构建一个App并遇到一个奇怪的问题。 JSX代码如下（对不起，它有点冗长）：

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

更改标签后会发生什么，第一个标签“测试”将不再显示。

如果我将/* [1] */的行更改为{this.state.tabs[this.state.activeTab].ref}，则按预期工作。

这是fiddle

Answer 1

在旧版本的React中，您无法重用组件描述符，并且需要在多次渲染时重新创建它们。您的代码可以使用React 0.11。