react：组件通信

组件通信

父组件向子组件通信

function App() {return (<div><div>这是父组件</div><Child name="这是子组件" /></div>);
}// 子组件
function Child(props) {return <div>{props.name}</div>;
}

在这里插入图片描述
props说明

props可以传递任意的数据，可以是数字、字符串、布尔值、数组、对象、函数、JSX
props是只读对象，只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改

特殊的prop children
当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

function App() {return (<div><div>这是父组件</div><Child name="这是子组件"><span>把内容嵌套在标签中</span><span>children属性</span></Child></div>);
}// 子组件
function Child(props) {return (<div>{props.name}{props.children.map((item, index) => {return <div key={index}>{item}</div>;})}</div>);
}

在这里插入图片描述

子组件向父组件通信

核心思路：在子组件中调用父组件中的函数并传递参数

function App() {const [count, setCount] = useState(0);return (<div><div>这是父组件</div><div>当前数值是：{count}</div><Child onGetMsg={(num) => setCount(num)}></Child></div>);
}// 子组件
function Child({ onGetMsg }) {const msg = 1;const sendMsg = () => {// 调用父组件方法，传递信息onGetMsg(msg);};return (<div><button onClick={sendMsg}>发送消息</button></div>);
}

兄弟组件通信

使用状态提升实现兄弟组件通信，通过父组件进行兄弟组件之间的数据传递。
A组件先通过子传父的方式把数据传给父组件，父组件拿到数据后再通过父传子的方式传递给B组件
在这里插入图片描述

function App() {const [msg, setMsg] = useState(0);return (<divstyle={{width: "500px",height: "300px",border: "1px solid red",}}><div>父组件</div><ChildA onGetMsg={(msg) => setMsg(msg)} /><ChildB aMsg={msg} /></div>);
}// 子组件
function ChildA({ onGetMsg }) {const msg = "这是发给B组件的消息";const sendMsg = () => {// 调用父组件方法，传递信息onGetMsg(msg);};return (<div style={{ width: "200px", height: "100px", border: "1px solid green" }}><div>子组件A</div><button onClick={sendMsg}>发送消息</button></div>);
}
function ChildB(props) {return (<div style={{ width: "200px", height: "100px", border: "1px solid blue" }}><div>子组件B</div><div>子组件A传递的信息是：{props.aMsg}</div></div>);
}

在这里插入图片描述

跨层级组件通信

使用Context机制实现跨层级组件通信

使用createContext方法创建一个上下文对象Ctx
在顶层组件中通过Ctx.Provider组件提供数据
在底层组件中通过useContext钩子函数获取数据

// 1、创建一个上下文对象
const MsgContext = createContext();function App() {const msg = "跨层级传递数据";return (<divstyle={{width: "500px",height: "300px",border: "1px solid red",}}><div>父组件</div>{/* 2、使用上下文对象，将数据传递给子组件 ，value是用来提供数据的*/}<MsgContext.Provider value={msg}><Son /></MsgContext.Provider></div>);
}// 子组件
function Son() {return (<div style={{ width: "300px", height: "150px", border: "1px solid green" }}><div>子组件</div><Grandson /></div>);
}
function Grandson() {// 3、使用上下文对象，获取数据const msg = useContext(MsgContext);return (<div style={{ width: "200px", height: "100px", border: "1px solid blue" }}><div>孙子组件</div><div>顶层传递的数据是：{msg}</div></div>);
}