.sports-changed-statusを.sports-last-secondに変更する必要があります。

Question

• Reactjsを初めて使用しています。
• stausがアクティブな場合。私はpタグを更新し、私が条件ならば、Aを作成したが、挿入する方法がわからなかった.sports-last-second
• に変更する必要があります私のliClass.sports-changed-status
.sports-last-secondように更新する必要がありますする必要があります。
• あなたはそれを行う方法を教えてもらえますか？

• 下記のコードを提供してください。私が言うことができるものから、

  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でやったものと同様のものを適用することができます。それらの実装方法を見てみましょう。クラス名の変更は、この行がで処理される方法と同じになります

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

：

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>タグの内容を変更すると、ほんの少しの変化だろうactiveClass：

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

このsh ouldは簡単に扱うことができます。