相同的标签内容正在显示两次 [英] Same tab content is being displaying twice

问题描述

我实现了一个简单的标签代码。我试图移动标签容器里面我的li标签，因为它的一个新的要求。

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

推荐答案

正在显示内容在这两个地方，因为这一行：

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

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

props.children ，因此您选择只显示所选内容。这是正确的，除了你为每个孩子，因为地图：

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>

最好的解决方案是使用与相同的检查.state.selected === index 为您的优势，只需设置 ：

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>

请参阅 updated JSFiddle 。

这篇关于相同的标签内容正在显示两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！