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>

Updated JSFiddle

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

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

这应该足够简单来处理。

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

1 个答案: