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)}// 获取msgfunction 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>)
}