react tab標籤以及樣式切換。

方法一： 

原理： 利用state 中的變數值，控制menu列表平的樣式切換

示例demo：

import React from "react";import "./App.css"
export default class App extends React.Component{ state = { menuNum: 1 }
setMenuNum = (num) => { this.setState({ menuNum: num }); }
render(){ return ( <div className="box"> <button className={this.state.menuNum===1?"btn btn-choose ":"btn"} onClick= {()=>this.setMenuNum(1)} >按鈕1</button> <button className={this.state.menuNum===2?"btn btn-choose ":"btn"} onClick= {()=>this.setMenuNum(2)} >按鈕2</button> <button className={this.state.menuNum===3?"btn btn-choose ":"btn"} onClick= {()=>this.setMenuNum(3)} >按鈕3</button> </div> ) }}.box { margin: 40px auto; text-align: center;}
.btn { width: 80px; height: 40px; background: green; margin: 20px;}
.btn-choose{ background: pink;}

方法二：

原理：（利用 react-router實現）

1、將Route進行一次封裝，並將link設定到他的子元素

2、點選link  將會觸發 所有 path 符合的 Route

3、因為包裹該 link 的Route 的path 是 吻合的，其他的是不吻合的，（吻合時，children回撥中的match是存在的）

4、所以 根據子元素 的match 是否存在判斷link標籤是否被點選了

5、再根據  match 是否存在設定不同的樣式

6、因為每次點選link 都會觸發 Route ，所以樣式也會跟著切換

示例demo：

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';import { BrowserRouter as Router, Route, Link} from 'react-router-dom';
const Styles = { li1: { color: "blue", background: "red", float: "left", listStyle: "none", margin: "10px" }, li2: { color: "white", background: "black", float: "left", listStyle: "none", margin: "10px" }}
// 對Route 進行一次封裝， 當點選 link 觸發的時候，包裹 該link 的 route 的path 吻合也會觸發，// 然後判斷 match 是否存在，存在的話 就設定一個樣式，不存在的話設定另一個樣式const MenuItem = ({ to, text, exact }) => { return <Route path={to} exact={exact} children={ ({ match }) => { console.log(match,"match") return <Link to={to}> <li style={match ? Styles.li1 : Styles.li2}>{text}</li> </Link> }} />};
const Home = () => ( <div>home</div>)const Login = () => ( <div>login頁</div>)const Main = () => ( <div>main</div>)
class App extends Component {
render() { return ( <Router> <div style={{margin:"40px"}}> <div style={{overflow:"hidden"}}> <MenuItem to="/home" text="主頁" exact /> <MenuItem to="/login" text="登入" /> <MenuItem to="/main" text="內容" /> </div> <hr/> <div style={{textAlign:"left"}}> <Route path="/home" component={Home} /> <Route path="/login" component={Login} /> <Route path="/main" component={Main} /> </div>
</div> </Router> ); }}
export default App;