同一标签页内容显示两次

用户名

我已经实现了一个简单的标签代码。我正在尝试将标签容器移到我的li标签内，因为这是一项新要求。更改代码后，相同的选项卡内容将显示两次。

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

安德鲁·梅西耶（Andrew Messier）

由于以下这一行，因此在两个地方都显示了该内容：

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

该props.children属性包含两个孩子，因此您选择仅显示所选内容。没错，只是由于以下原因，您正在为每个孩子这样做map：

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

最好的解决方案是，仅当内容为所选内容时，才this.state.selected === index通过设置内容来使用与您相同的检查：

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>

参见更新的JSFiddle。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。