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

我是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>
}
}

最佳答案

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

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

您可以使用此行来确定选项卡是否处于活动状态。然后，使用代码行旁边的来基于该值设置上下文：

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}`}

那应该足够简单。