一、父传子
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;
2.代码说明
1.首先需要通过createContext创建上下文标签(MsgContext),命名需要采用大驼峰命名法;
2.需要在顶层组件中使用MsgContext.Provider标签,将子标签包裹起来;
3.在需要获取顶层组件数据的后代组件中使用useContext(MsgContext)钩子函数来获取;
4.隔代间的数据通信并不是说爷孙之间,而是有上下关系的组件,也就是不管隔了多少代,比如父子之间也是可以使用的;
5.所谓的顶层组件就是需要传递数据给后代组件的组件;
6.<MsgContext.Provider value={fatherMsg}>,除了fatherMsg是变量外都是固定写法,value属性是用于传递数据的属性