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;

热门工具换一换