.sports-changed-status 应更改为 .sports-last-second

Question

• 我是 Reactjs 的新手。
• 如果状态处于活动状态。我需要更新 p 标签并且需要在我的liClass 中更新为.sports-last-second
• .sports-changed-status 应改为 .sports-last-second
• 我创建了一个 if 条件，但不确定如何插入。
• 你们能告诉我怎么做吗？

• 在下面提供我的代码。

  newContentAdded: function () {
  
  var firstTab = 'got-the-value';
  
  if (firstTab == 'got-the-value')
  {
   <p> got-the-value got-the-value got-the-value got-the-value </p>
  }
  }
  

Answer 1

据我所知，您已经拥有执行此操作所需的所有代码。

var isActive = this.state.selected === index;

您可以通过此行来确定您的选项卡是否处于活动状态。然后，您可以使用 next to 代码行来根据值设置上下文：

var activeClass = (isActive ? 'active' : '');
var content = isActive ? this.props.children[this.state.selected] : null;

您可以应用类似于您对content 和activeClass 所做的操作。看看你是如何实现它们的。

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

      <div className="tabs__content">
        {content} // <== Adds content only if active
      </div>

    </li>
  );

所以改变<p>标签的内容只是一个小改动：

var newContent = <span>Hello</span>;
var pContent = isActive ? newContent : child.props.subtitle;
...

// Use the pContent variable instead of child.props.subtitle
<p className="sports-subtitle">{pContent}</p>

Updated JSFiddle

className 的修改将与activeClass 处理此行的方式相同：

....
className={`sports-tab-header ${activeClass}`}

这应该足够简单处理。