组件通信

父子通信

父传子

// 父传子
function Son(props){console.log(props);return(<div>这是子组件  {props.msg}</div>)
}function App() {const msg='父组件数据'const msg2='父组件数据2'return (<div className="App"><Son msg={msg} msg2={msg2}></Son></div>);
}export default App;

1、props能传递任意数据  包括JSX

2、props为只读数据  需要父组件进行修改

3、children  特殊的props

直接在子组件标签内的数据  为children属性

 <Son msg={msg} msg2={msg2}><span>props的children属性</span></Son>function Son(props){console.log(props);return(<div>这是子组件  {props.msg}<div>{props.children}</div></div>)
}

子传父

子组件中调用父组件函数进行传值

子组件的点击事件调用父组件的函数进行修改

需要再父组件中存在这个定义方法，在子组件中传入，使用点击事件调用 应该是4321顺序

兄弟通信 二合一

就是A组件传值给父组件  父组件传值给B组件

import { useState } from "react";// 父传子
function A({ sendMsg }) {const msg = "A组件的msg";return (<div>这是子组件A<button onClick={() => sendMsg(msg)}>传值</button></div>);
}
function B(props) {return <div>这是子组件B {props.Amsg}</div>;
}function App() {const [Amsg, setAmsg] = useState("");const sendMsg = (msg) => {console.log(msg);setAmsg(msg);};return (<div className="App"><A sendMsg={sendMsg}></A><B Amsg={Amsg}></B></div>);
}

跨组件通信

App组件传值给A组件里的B组件

1、使用createContext创建一个上下文对象

2、在顶层组件A中通过Ctx.Provider提供数据

3、在底层组件B中通过useContext钩子函数获取数据

import { createContext, useContext, useState } from "react";
const MsgContext=createContext()function C(){return(<div>这是C组件<D></D></div>)
}
function D(){const Dmsg= useContext(MsgContext)return(<div>这是D组件 {Dmsg}</div>)
}function App() {const appMsg='这是app的数据'return (<div className="App"><MsgContext value={appMsg}><C></C></MsgContext></div>);
}export default App;