Same tab content is being displaying twice

问题

I have implemented a simple tabs code. I am trying to move the tabs container inside my li tag, since its a new requirement. After changing the code the same tab content is being displaying twice.

  _renderTitles: function () {
    function labels(child, index) {
        var activeClass = (this.state.selected === index ? 'active' : '');

        return (
        <li role="presentation" key={index} className={child.props.liClass}>
            <a href="#" 
            className={`sports-tab-header ${activeClass}`}
            onClick={this.handleClick.bind(this, index)}>
            <h2>{child.props.label}</h2>
            <p className="sports-subtitle">{child.props.subtitle}</p>
          </a>
        </li>
      );
    }
    return (
        <ul className="tabs__labels">
        {this.props.children.map(labels.bind(this))}
      </ul>
    );
  },

回答1:

The content is being shown in both places because of this line:

<div className="tabs__content">
  {this.props.children[this.state.selected]}
</div>

The props.children property holds both children, so you choose to show only the selected content. This is right, except that you're doing this for each child due to the map:

<ul className="tabs__labels">
  {this.props.children.map(labels.bind(this))}
</ul>

The solution that works best is to use the same check you had for this.state.selected === index to your advantage by setting the content only if it's the selected content:

var isActive = this.state.selected === index;
var activeClass = (isActive ? 'active' : '');
// Only set the content if active 
var content = isActive ? this.props.children[this.state.selected] : null;
...

// Show the content, which will be null if not active tab
<div className="tabs__content">
  {content}
</div>

See updated JSFiddle.

来源：https://stackoverflow.com/questions/40498339/same-tab-content-is-being-displaying-twice