React组件通信
一、父传子
方式1:
通过在子组件标签上设置属性值
传递,子组件函数通过props参数
接收
如:
// 定义子组件
function Son(props) {
// 通过标签属性传递,属性以及对应的值都会通过props参数接收
return <div>父组件传递的属性值:name={props.name}</div>
}
export default function App() {
return (
<div className="App">
<Son name='zs'></Son>
</div>
);
}
props参数接收的是一个对象,该对象接收了父组件传来的各种属性值
等
方式2:
在子组件闭合标签中传递chidren对象
,通过子组件函数的props参数接收
,props.chidren
进行访问
如:
// 定义子组件
function Son(props) {
return <div>{props.children}</div>
}
export default function App() {
return (
<div className="App">
<Son>
<div>children传递</div>
</Son>
</div>
);
}
这里需要注意的是,如果在子组件闭合标签中只传递1个标签
,那么chidren就是这个标签对象
;如果传递了多个标签
,chidren将是一个数组
二、子传父
父组件将通信函数通过标签属性传递给子组件,子组件通过向通信函数传递参数
来进行数据通信
如:
import {useState} from "react";
function Son(props) {
// 执行父组件传来的通信函数,通过通信函数参数传递传递通信数据
return <div>
<button onClick={() => props.onTime(Date.now())}>问问儿子时间</button>
</div>
}
export default function App() {
const [curTime, setCurTime] = useState()
// 定义通信函数
function getCurTime(cTime) {
// 从子组件获取到cTime进行自定义操作
setCurTime(cTime)
}
return (
<div className="App">
{/* 通过标签属性将函数传递给子组件 */}
<Son onTime={getCurTime}/>
{/* 展示儿子传来的时间 */}
<div>{curTime}</div>
</div>
);
}
三、兄弟通信
儿子A和儿子B通信,即A -> 父亲 -> B
如:
function SonA(props) {
const [msg, setMsg] = useState('A: 我饿了!' + Date.now())
return (
<button onClick={() => {
setMsg('A: 我饿了!' + Date.now())
props.acceptMsgFromSonA(msg)
}}>
儿子A饿了
</button>
)
}
function SonB(props) {
return <div>
<div>儿子B</div>
<div>接收到父亲传来的消息:{props.acceptMsgFromFather()}</div>
</div>
}
export default function App() {
const [msg, setMsg] = useState()
// 用msg接收儿子A传来的数据
function acceptMsgFromSonA(message) {
setMsg(message)
}
// 获取msg
function getMsg() {
return msg
}
return (
<div>
<SonA acceptMsgFromSonA={acceptMsgFromSonA}></SonA>
<SonB acceptMsgFromFather={getMsg}></SonB>
</div>
)
}
四、顶层向底层传递
即父向子、父向孙、…等传递数据
① 利用createContext()
创建上下文Context对象
② 在顶层组件
需要传递数据的地方用Context.Provider
标签包裹,通过value
属性指定需要传递的数据
③ 在底层组件
通过useContext(Context)
拿到顶层传递的数据
具体使用如下:
// 1.创建上下文对象
const MsgContext = createContext()
export default function App() {
const [msg, setMsg] = useState('父组件Msg')
const [modifyCount, setModifyCount] = useState(0)
return (
<div>
{/* 2.通过Context.Provider的value属性指定向下传递的数据 */}
<MsgContext.Provider value={msg}>
<div>父组件:</div>
<Son></Son>
</MsgContext.Provider>
<button onClick={() => {
setMsg(`修改父组件Msg ${modifyCount + 1}次`)
setModifyCount(modifyCount + 1)
}}>
修改父组件Msg
</button>
</div>
)
}
function Son(props) {
return (
<div>
<div>儿子组件:</div>
<GrandSon></GrandSon>
</div>
)
}
function GrandSon(props) {
// 3.使用useContext(Context)获取顶层传递的数据
const msg = useContext(MsgContext)
return (
<div>
<div>孙子组件:{msg}</div>
</div>
)
}
标签:function,传递,return,通信,React,msg,props,组件
From: https://blog.csdn.net/weixin_74261199/article/details/142927657