jQueryのは、他の要素removeClassの同じレベルを見つけるとaddClassの要素を実現することができますが、直接の兄弟要素を反応させるために、この時間は追加に合わせて少し思考のJSを必要としない、[追加]をクリックしニーズにコードの一行だけを切り替えるために、ナビゲーションバーの実装しましたクラス名を付加されたシーケンス番号を解析
私はオンラインファイル新人のチュートリアルへの参照を直接試験例を、容易にするためには、直接実行するコードを貼り付けることができます
<！DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8" />
<タイトル>こんにちはリアクト！</ TITLE>
<スクリプトSRC = "https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"> </ SCRIPT>
<スクリプトSRC = "https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"> </ SCRIPT>
<スクリプトSRC = "https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"> </ SCRIPT>
<スタイル>
* {マージン：0;パディング：0;}
.change {背景色：＃1 ff6637;フロート：左;幅：120ピクセル、高さは50px ;;行の高さ：は50px;テキスト整列：センター;色：#FFF;マージン右：20ピクセル;}
.TYPE {フロート：左;幅：120ピクセル、高さは50px ;;行の高さ：は50px;テキスト整列：センター;色：#FFF;マージン右：20ピクセル、背景色：＃1 2b2b2b;}
</スタイル>
</ head>の
<身体>
<DIV ID = "ボックス" スタイル= "幅：100％;高さ：は50px;背景：＃1 2b2b2b;"> </ div>
ます。<script type = "text /バベル">
クラスNAVがReact.Componentを{延び
コンストラクタ（小道具）{
スーパー（小道具）。
this.state = {currentIndex：0}。
}
setCurrentIndex =（イベント）=> {
this.setState（{
// parseIndex（）は2つのパラメータを有し、第二のパラメータは、16進値が解析され表し、対応する進数を返します
//event.currentTarget.getAttribute('index「）は、現在のシリアル番号を取得し、イベントによって数に変換します
currentIndex：のparseInt（event.currentTarget.getAttribute（ 'インデックス'）、10）
}）
}
{レンダリング（）
聞かせて内容= [「会社概要「」ホーム」、「顧客のケース」、「ニュース」、「私たちのチーム」、「お問い合わせ」];
newContent = []みましょう。
{（; iがcontent.lengthを<I ++は、I = 0せて）のために
//キー属性は、不確実性の要素の場合にパフォーマンス・オーバーヘッドを低減すること、異なる要素を識別する
//すべての異なる要素が全て一度DOM更新操作を実行した後にのみ、後に発見され、同じ時間であり、比較要素のサブ要素の変化の特定の要素の位置を特定しない反応します。
// tree1という
// <UL>
// <LIキー= "1"> 1 </ LI>
// <LIキー= "2"> 2 </ LI>
// </ UL>
//樹上村
// <UL>
// <LIキー= "1"> 1 </ LI>
// <LIキー= "3"> 3 </ LI>
// <LIキー= "2"> 2 </ LI>
// </ UL>
//挿入のための更新は、直接に反応するが第二のサブ要素を削除し、残りの要素を追加するが、キー属性識別と結合されている場合、直接挿入操作はなりません
newContent.push（<DIVキー= {I}
= {クラス名this.state.currentIndex === I「変更」？「タイプ」}
//はクラス名を置き換えるために、同一の電流更新シーケンス番号か否かを判断します
インデックス= {I}のonClick = {} this.setCurrentIndex
> {コンテンツ[I]} </ div>）。
}
（戻ります
<DIVスタイル= {{幅： "1200px"、高さ： "は50px"、余白： "AUTO"}}> {newContent} </ div>
）
}
}
ReactDOM.render（
<ナビ/>、
document.getElementById（ '箱'）
）;
</ SCRIPT>
</ BODY>
</ HTML>