当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 9:18:27

前言

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

二、使用

1.父传子

2.子传父

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

第一步:

第二步使用：

第一种：

第二种：

演示：

总结

前言

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

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

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

二、使用

1.父传子

代码如下（示例）：

pageB代码

import componentA from './demo-classComponents'const PageB= ()=>{return(<div><p>我是页面PageB</p><hr/><componentA toSon="给组件A的值"/></div>)
}

componentA代码

const ComponentA = (props)=>{retrun ({/* 接收从pageB传来的值，在页面显示出来 */}<p>我是ComponentA 组件</p><p>展示从其他页面传来的值：</p><div>{props.toSon}</div>)
}export default ComponentA

演示结果：

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

pageB代码

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

componentA代码

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代码

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代码

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文件：

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

第二步使用：

用两种使用方式

第一种：

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

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

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

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中数据获取并返回值

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中的默认数据


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>);
}