在jquery中實現導航欄的切換只需要一行代碼找到同級其他元素removeClass以及添加點擊元素addClass就可以實現了，但是React沒法直接找到同級元素，這個時候需要一點js中的思維，根據添加的序列號判斷該添加哪種className
為了方便實例測試，這個我直接引用了菜鳥教程的在線文件，可以直接將代碼粘貼運行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.change{background-color: #ff6637;float:left;width: 120px;height: 50px;;line-height: 50px;text-align: center;color: #fff;margin-right: 20px;}
.type{float:left;width: 120px;height: 50px;;line-height: 50px;text-align: center;color: #fff;margin-right: 20px;background-color: #2b2b2b;}
</style>
</head>
<body>
<div id="box" style="width: 100%;height:50px;background:#2b2b2b;"></div>
<script type="text/babel">
class Nav extends React.Component {
constructor(props){
super(props);
this.state={currentIndex:0};
}
setCurrentIndex=(event)=>{
this.setState({
//parseIndex()有兩個參數，第二個參數表示被解析值的進制，並返回對應的十進制數
//event.currentTarget.getAttribute('index')，通過事件獲取當前的序列號並將之轉換為number
currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
})
}
render(){
let content=["首頁","關於我們","客戶案例","新聞資訊","我們的團隊","聯系我們"];
let newContent=[];
for(let i = 0; i < content.length; i++) {
// key屬性標識不同的元素，在元素不確定的情況下減少性能開銷
//react在比較元素子元素是否相同的時候並不會精確查找元素具體的位置變動，只會在查到到不同之后對之后所有的元素全部執行一次dom更新操作。
//tree1
//<ul>
//<li key="1">1</li>
//<li key="2">2</li>
//</ul>
//tree2
//<ul>
//<li key="1">1</li>
//<li key="3">3</li>
//<li key="2">2</li>
//</ul>
//對於上述插入更新情況，React不會直接插入而是會移除第二個子元素再添加剩余元素但是如果加上key屬性標識，會直接進行insert操作
newContent.push(<div key={i}
className={this.state.currentIndex === i ? 'change' : 'type'}
//判斷當前更新的序列號是否相同，相同就更換className
index={i} onClick={this.setCurrentIndex}
>{content[i]}</div>);
}
return(
<div style={{width:"1200px",height:"50px",margin:"auto"}}>{newContent}</div>
)
}
}
ReactDOM.render(
<Nav />,
document.getElementById('box')
);
</script>
</body>
</html>