React learning - use props attribute to realize navigation bar switching

Today I learned the props attribute in react, and used this attribute to make a demo effect of switching the navigation bar, and share it with everyone!

Final display effect

1. First prepare the directory structure , you can decide according to your own project situation

2. Code in the container

import Nav from "./Nav"
import MainFirst from "./component/MainFirst"
import MainSeconde from "./component/MainSeconde"
import MainThree from "./component/MainThree"
import { useState } from "react"
export default function Container(){
    //定义状态变量
    const [pages,setPages] = useState<string>("MainFirst")
    return(
        <div className="container">
            <div><Nav setPage ={setPages}/></div>
            <div>
                <MainFirst page={pages}/>
                <MainSeconde page={pages} />
                <MainThree page={pages}/>
            </div>
        </div>
    )
}

Define a control state in the container

//定义状态变量
    const [pages,setPages] = useState<string>("MainFirst")

Pass the state value to the page to show and hide

            <div>
                <MainFirst page={pages}/>
                <MainSeconde page={pages} />
                <MainThree page={pages}/>
            </div>

Pass the method of modifying the state value to the corresponding toggle button in the navigation bar

<div><Nav setPage ={setPages}/></div>

3. Navigation bar page

The navigation bar receives the props parameter passed by the container component

Bind a click event to each navigation button , when the button is clicked, call the click callback function , and pass the string name of the page corresponding to the button to the click event callback function

When the click event is triggered, combine the props parameter and the callback passing parameter to update the control state in the container component

When the state is updated, the component will be refreshed

export default function Nav({setPage}:any){
    const changPage = (page:string)=>{
        setPage(page)
    }
    return(
        <div className="nav">
            <ul>
                <li onClick={changPage.bind(null,"MainFirst")}>首页</li>
                <li onClick={changPage.bind(null,"MainSeconde")}>商品详情</li>
                <li onClick={changPage.bind(null,"MainThree")}>关于我们</li>
            </ul>
        </div>
    )
}

4. Display page

Receive the props attribute on the display page , and control the display and hiding of the page according to the props attribute value and display attribute

export default function MainFirst({page}:{page:string}){
    return(
        <div style={
   
   {height:"400px",backgroundColor:"skyblue",display:page=="MainFirst"?"block":"none"}}>
            <h1 >首页</h1>
        </div>
    )
}

export default function MainSeconde({page}:{page:string}){
    return(
        <div style={
   
   {height:"400px",backgroundColor:"pink",display:page=="MainSeconde"?"block":"none"}}>
            <h1>商品详情</h1>
        </div>
    )
}

export default function MainThree({page}:{page:string}){
    return(
        <div style={
   
   {height:"400px",backgroundColor:"green",display:page=="MainThree"?"block":"none"}}>
            <h1>关于我们</h1>
        </div>
    )
}

In this way, the effect of switching the navigation bar at will is realized.

Knowledge points:

props reverse data flow
nesting of components
The state is updated, and the component will be refreshed
When the parent component is refreshed, the child component will also be refreshed
The parent component determines the position of the child component

shortcoming:

The props attribute is often used for communication between parents and children, and it is not convenient to nest multi-layer components.
You can use the hook function useContext()
The next article will demonstrate the use of useContext() to achieve this effect

React learning - use props attribute to realize navigation bar switching

Guess you like