.sports-changed-status should be changed to .sports-last-sec

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;

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

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>

更新的 JSFiddle

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

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

这应该足够简单，可以处理。