目录
前言
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来进行组件传参。