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:
40
px auto;
text-align: center;
}
.btn {
width:
80
px;
height:
40
px;
background: green;
margin:
20
px;
}
.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;