react tab tag and style switch.
Method 1:
Principles: Use the variable value in State to control the style switching of the menu list
Example demo:
Import React from "React";
import "./app.css"
export default class app expict.comPonent {
state = {
menunum: 1
}
setmenunum = (num) => {
This.setState ({
menunum: num
});
}
Render () {{
Return (Return (
<div className = "box">
<Button
className = {This.State.menunum === 1? "BTN BTN-Choose": "BTN"}
Onclick = {() => This.Setmenunum (1)}
> Button 1 </button>
<Button
className = {This.State.menunum === 2? "BTN BTN-Choose": "BTN"}
Onclick = {() => This.setMenunum (2)}
> Button 2 </button>
<Button
className = {This.State.menunum === 3? "BTN BTN-Choose": "BTN"}
Onclick = {() => This.setMenunum (3)}
> Button 3 </button>
</div>
Cure
}
}
.BOX {
margin: 40px auto;
text-align: center;
}
.btn {
width: 80px;
height: 40px;
background: Green; Green;
margin: 20px;
}
.btn-choose {
background: pink;
}Method two:
Principle of
Use React-Router to implement）
1. Pack the route once and set the LINK to his sub -element
2, click link will trigger all the routes that PATH comply with
3. Because the PATH of the Link Route is in line with, the others are not consistent.
4. Therefore, whether the Link tag is clicked according to whether the MATCH of the sub -element is clicked
5. Then set different styles according to whether there are in MATCH
6. Because every time you click LINK, Route will be triggered, so the style will also switch
Example 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"
}
}
// Package the route once. When clicking link triggers, the PATH of the LINK's route is also triggered.
// Then determine whether the MATCH exists, if you exist, set one style, and set another style if you do not exist
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>
Cure
const login = () => (
<div> Login page </div>
Cure
const main = () => (
<div> main </div>
Cure
class app exponent {
Render () {{
Return (Return (
<Router>
<div style = {{margin:"40px"}}>
<div style={
{Overflow: "Hidden"}}>
<Menuitem to = " /home" text = "homepage" exact />
<Menuitem to = " /login" text = "Login" />
<Menuitem to = " /main" text = "content" /> />
</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;