React学习之props(父传子,子传父),Context组件之间的传参。

目录

前言

一、什么时候需要使用props?

二、使用

1.父传子

2.子传父

二、什么时候需要使用Context?

第一步:

第二步使用:

第一种:

第二种:

演示:

总结


前言

React学习笔记记录,props在react组件中如何使用。父级组件向下传参,下级组件向上传参。当组件层级较深的,使用props传递数据要经过多层的传递很麻烦,就可以使用到context数据管理。


一、什么时候需要使用props?

当我们把页面的功能拆分为几个组件时,在一个页面中引入了子组件,子组件需要使用到当前页面的数据时,可以使用props来传递;父组件需要使用子组件的某些值来处理父组件的数据时,可以使用props来传递;组件插槽需要使用到props。

二、使用

1.父传子

代码如下(示例):

pageB代码

html 复制代码
import componentA from './demo-classComponents'

const PageB= ()=>{
    return(
        <div>
            <p>我是页面PageB</p>
            <hr/>
            <componentA toSon="给组件A的值"/>
        </div>
    )
}

componentA代码

javascript 复制代码
const ComponentA = (props)=>{
    retrun (
          {/* 接收从pageB传来的值,在页面显示出来 */}
        <p>我是ComponentA 组件</p>
        <p>展示从其他页面传来的值:</p>
        <div>{props.toSon}</div>
    )
}

export default ComponentA 

演示结果:

不仅可以传普通的值,也可以传函数等值

pageB代码

html 复制代码
import componentA from './demo-classComponents'

const PageB= ()=>{
    const testfuc = ()=>{
        console.log("使用testfuc")
    }
    return(
        <div>
            <componentA testfuc={testfuc}  toSon="给组件A的值"/>
        </div>
    )
}

componentA代码

javascript 复制代码
const ComponentA = (props)=>{
    const clickFunc = ()=>{
        props.testfunc(); //使用从pageB传来的函数方法
    }
    retrun (
          {/* 接收从pageB传来的值,在页面显示出来 */}
        <p>我是ComponentA 组件</p>
        <p>展示从其他页面传来的值:</p>
        <div>{props.toSon}</div>
        <button onClick={clickFunc}>点击我</button>
    )
}

export default ComponentA 

2.子传父

子组件需要向上级组件传递某些值时

componentA代码

javascript 复制代码
const ComponentA = (props)=>{
    const clickFunc = ()=>{
        props.testfunc(); //使用从pageB传来的函数方法
    }

    const clickFunc2 = ()=>{
        props.getsomeData('传给pageB的值');
    }

    retrun (
          {/* 接收从pageB传来的值,在页面显示出来 */}
        <p>我是ComponentA 组件</p>
        <p>展示从其他页面传来的值:</p>
        <div>{props.toSon}</div>
        <button onClick={clickFunc}>点击我</button>

         <button onClick={clickFunc2}>点击我给pageB传递一些值</button>
    )
}

export default ComponentA 

pageB代码

javascript 复制代码
import componentA from './demo-classComponents'

const PageB= ()=>{
    const testfuc = ()=>{
        console.log("使用testfuc")
    }

  const [comAData,setcomAData] = useState('')
    const getsomeData = (data)=>{
         // 这里的data就是从component传来的
       setcomAData(data)
    }


    return(
        <div>
             <p>我是页面PageB</p>
              {/* 展示接收到的值 */}
            <p>{comAData}</p>
            <hr/>

            <componentA getsomeData={getsomeData} testfuc={testfuc}  toSon="给组件A的值"/>
        </div>
    )
}

二、什么时候需要使用Context?

Context相当于一个公共的存储空间

可以将多个组件中都需要访问的数据统一存储到一个context中,

这样就无需通过props逐层传递,即可使组件访问到这些数据

可以设置默认值 也可以不设置

第一步:

在src下创建一个store文件夹,在此文件夹下就可以创建对应的context文件了

创建一个TestContext.js文件:

javascript 复制代码
import React from "react";

const TestContext = React.createContext({ //这个是默认数据,可以设置也可以不设置
    name:'小美',
    age:18
})

export default TestContext

第二步使用:

用两种使用方式

第一种:

*注意 这里会把TestContext当作一个组件使用 所以命名的时候 首字母需要大写

* Consumer的标签体需要一个回调函数

她会将context设置为回调函数的参数,通过参数就可以访问到context

javascript 复制代码
import TestContext from "../../store/TestContext"



const A = ()=>{
return (
    <TestContext.Consumer>
        {(ctx)=>{
            return <div>
                {ctx.name} - {ctx.age}
            </div>
        }}
    </TestContext.Consumer>
)
}

export default A

第二种:

1.导入定义的context

2.使用useContext()需要一个context作为参数

它会将context中数据获取并返回值

javascript 复制代码
import { useContext } from "react"
import TestContext from "../../store/TestContext"

const B = ()=>{
    const ctx = useContext(TestContext)

    console.log("ctxctx",ctx)
    return (
        <div style={{fontSize:'24rem'}}>
            {ctx.name} - {ctx.age}
        </div>
    )
}

export default B 

pageB页面

xxxx.Provider 例如:TestContext.Provider

-表示数据的生成者,可以使用它来指定context中的数据

-通过value 来指定context中存储的数据

当我们通过context访问数据时,他会读取离他最近的provider的数据

如果没有provider,则读取context中的默认数据

javascript 复制代码
import A from "./components/testContext/A";
import B from "./components/testContext/B";
import TestContext from "./store/TestContext";

const PageB= ()=>{
 return (
       <div>
        <A></A>
        <TestContext.Provider value={{name:'小刚',age:19}}>
            <B></B>
        </TestContext.Provider>
        
           <p>我是pageB页面</p>
       </div>
    );
}

演示:

总结

当组件嵌套的层级不是很深时,结果简单时,使用props进行组件的传参。

当组件嵌套冗余,层级很深的时候,就可以使用context来进行组件传参。

相关推荐
2303_Alpha2 天前
SpringBoot
笔记·学习
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng2 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa