react中组件间的通信

一、父传子

1.代码展示

import React, { useState } from 'react';function SonPage(props){ // 子组件const {msg} = propsreturn (<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;