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 (

<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;