react tab标签以及样式切换。
方法一：
原理： 利用state 中的变量值，控制menu列表平的样式切换
示例demo：
import React from "react";import "./App.css"export default class App extends ponent{state = {menuNum: 1}setMenuNum = (num) => {this.setState({menuNum: num});}render(){return (<div className="box"><buttonclassName={this.state.menuNum === 1 ? "btn btn-choose " : "btn"}onClick= {()=> this.setMenuNum(1)}>按钮1</button><buttonclassName={this.state.menuNum === 2 ? "btn btn-choose " : "btn"}onClick= {()=> this.setMenuNum(2)}>按钮2</button><buttonclassName={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;
