react中组件间的通信
一、父传子
1.代码展示
import React, { useState } from 'react';
function SonPage(props){ // 子组件
const {msg} = props
return (
<div>
我是子组件 {msg}
</div>
)
}
function App() { // 父组件
const [msgText,setMsgText] = useState('父传子')
return (
<div className="App">
<div>我是父组件</div>
<SonPage msg={msgText} />
</div>
);
}
export default App;2.代码说明
1.子组件名称命名采用大驼峰命名法；
2.<SonPage msg={msgText} />中的msg属性用来在子组件中获取父组件传递过来msgText，msgText是父组件传递过来的数据
3.在子组件中组件函数名中有个参数SonPage(props)，所有父组件传递过来的数据都在该参数中
3.效果展示
二、子传父
1.代码展示
import React, { useState } from 'react';
function SonPage(props){ // 子组件
const {msg} = props // 解构：可以解构出传递过来的数据和方法
const sonMsg = '子传父'
return (
<div>
我是子组件 {msg}
<button onClick={()=>props.getSonMsg(sonMsg)}>点击发送消息到父组件</button>
</div>
)
}
function App() { // 父组件
const [msgText,setMsgText] = useState('父传子')
const [sonMsgText,setSonMsgText] = useState('')
function getSonMsg(sonMsg){
setSonMsgText(sonMsg)
}
return (
<div className="App">
<div>我是父组件 {sonMsgText}</div>
<SonPage msg={msgText} getSonMsg={getSonMsg}/>
</div>
);
}
export default App;2.代码说明
1.子传父就相当于父传子，只不过父传子传递的是数据，而子传父传递的是方法；
2.<SonPage msg={msgText} getSonMsg={getSonMsg}/>，同样需要在子组件标签上定义一个属性（getSonMsg）用于子组件中获取父组件传递过来的方法（getSonMsg），命名上一般要求以on开头代表传递方法，我这里没用on开头是便于理解；
3.在子组件中组件函数名中有个参数SonPage(props)，所有父组件传递过来的数据和方法都在该参数中，所以可以通过props.getSonMsg()来触发到父组件中的方法（getSonMsg）；
4.该方法就是用来获取子组件传递过来的参数，有个参数就是子组件传递过来的数据
（getSonMsg(sonMsg)）
3.效果展示
三、兄弟之间数据通信
1.代码展示
import React, { useState } from 'react';
function AItem(props){
const { onGetDataA } = props;
const [msgA] = useState('组件A的数据')
return (
<div>
我是子组件A
<button onClick={()=>onGetDataA(msgA)}>点击发送数据</button>
</div>
)
}
function BItem(props){
const { getMsgAText } = props;
return (
<div>我是子组件B {getMsgAText}</div>
)
}
function App() { // 父组件
const [msgAText,setMsgAText] = useState()
function getDataA(msgAText){
setMsgAText(msgAText)
console.log('msgAText',msgAText);
}
return (
<div className="App">
<div>我是父组件</div>
<AItem onGetDataA={getDataA}/>
<BItem getMsgAText={msgAText}/>
</div>
);
}
export default App;2.代码说明
兄弟间的通信其实就是同时使用父传子和子传父；先是子传父，将A组件的数据传递给父组件，再是在父组件中将A组件传递过来的数据通过父传子传递给B组件
3.效果展示
四、隔代间的数据通信
1.代码展示
import React, { useState, useContext, createContext } from 'react';
const MsgContext = createContext()
function AItem() {
return (
<div>
<div>我是子组件A</div>
<BItem />
</div>
)
}
function BItem() {
const fatherMsg = useContext(MsgContext)
return (
<div>我是孙子组件B {fatherMsg}</div>
)
}
function App() { // 父组件
const fatherMsg = '父组件的数据'
return (
<div className="App">
<MsgContext.Provider value={fatherMsg}>
<div>我是父组件</div>
<AItem />
</MsgContext.Provider>
</div>
);
}
export default App;2.代码说明
1.首先需要通过createContext创建上下文标签（MsgContext），命名需要采用大驼峰命名法；
2.需要在顶层组件中使用MsgContext.Provider标签，将子标签包裹起来；
3.在需要获取顶层组件数据的后代组件中使用useContext(MsgContext)钩子函数来获取；
4.隔代间的数据通信并不是说爷孙之间，而是有上下关系的组件，也就是不管隔了多少代，比如父子之间也是可以使用的；
5.所谓的顶层组件就是需要传递数据给后代组件的组件；
6.<MsgContext.Provider value={fatherMsg}>，除了fatherMsg是变量外都是固定写法，value属性是用于传递数据的属性
3.效果展示
原文地址：https://blog.csdn.net/2202_75509848/article/details/140608062
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！