react点击tab样式切换（tab标签及样式切换）
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 (
)
}
}
.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 {
console.log(match,"match")
return
{text}
}} />
};
const Home = () => (
home
)
const Login = () => (
login页
)
const Main = () => (
main
)
class App extends Component {
render() {
return (
);
}
}
export default App;