React学习-利用props属性实现导航栏切换

今天学习了react中的props属性，并使用这个属性做了一个导航栏切换的demo效果，分享给大家！

最终展示效果

 

1.首先准备目录结构，大家可以根据自己项目情况而定

 

2.容器中的代码

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("MainFirst")
    return(
        

            

            

                
                
                
            
        
    )
}

在容器中定义一个控制状态

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

将状态值传给要显示与隐藏的页面

将修改状态值的方法传递给导航栏中的对应切换按钮

3.导航栏页面

导航栏接收到容器组件传递过来的props参数

给每个导航按钮绑定一个点击事件，当点击按钮时，调用点击回调函数，并将按钮对应要显示的页面字符串名称传递给点击事件回调函数

当点击事件被触发时，将props参数和回调传递参数结合，更新容器组件中的控制状态

当状态更新后，会重新刷新组件

export default function Nav({setPage}:any){
    const changPage = (page:string)=>{
        setPage(page)
    }
    return(
        

            

                
首页
                
商品详情
                
关于我们
            
        
    )
}

4.显示页面

在显示页面接收props属性，根据props属性值和display属性控制页面的显示隐藏

export default function MainFirst({page}:{page:string}){
    return(
        

            
首页
        
    )
}

export default function MainSeconde({page}:{page:string}){
    return(
        

            
商品详情
        
    )
}

export default function MainThree({page}:{page:string}){
    return(
        

            
关于我们
        
    )
}

这样就实现了导航栏随意切换的效果

知识点：

•  props反向数据流
• 组件的嵌套
• 状态更新，组件会重新刷新
• 父组件刷新，子组件也会重新刷新
• 父组件决定子组件的位置

缺点：

• props属性常用在父子间通信，多层组件嵌套都不太方便
• 可以使用hook函数 useContext()
• 下篇为大家演示使用useContext()实现此效果