组件通信

组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。

父子通信

父传子

实现步骤

1. 父组件传递数据：在子组件标签上绑定属性。

2. 子组件接收数据：子组件通过 props参数 接收数据。

• props是一个对象，里面包含了父组件传递过来的所有数据。

• props可以传递任意的数据：数字、字符串、布尔值、数组、对象、函数、JSX等

• props是只读属性，子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改。

父组件

import Son from "./Son";
export default function App() {
  let name = "cc";
  return (
    <>
      <Son name={name} />
    </>
  );
}

子组件

export default function Son(props) {
  const { name } = props;
  return (
    <div>
      <h1>this is Son: {name}</h1>
    </div>
  );
}

特殊prop children

props对象的属性与组件的属性一一对应，但其中有一个比较特殊的参数就是props.children，它表示当前组件中所有的子节点。

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

父组件

import Son from "./Son";
export default function App() {
  return (
    <>
      <Son>
        <span>把内容嵌套在子组件标签中</span>
      </Son>
    </>
  );
}

子组件

export default function Son(props) {
  return (
    <div>
      <h1>this is Son: {props.children}</h1>
    </div>
  );
}

子传父

实现步骤

在子组件中调用父组件中的函数并传递参数

父组件

import Son from "./Son";
export default function App() {
  const getMsg = (param) => {
    console.log(param);
  };
  return (
    <>
      <Son onGetSonMsg={getMsg}></Son>
    </>
  );
}

子组件

export default function Son(props) {
  const { onGetSonMsg } = props;
  const SonMsg = "Son Data";
  return (
    <div>
      <button onClick={() => onGetSonMsg(SonMsg)}>发送</button>
    </div>
  );
}

兄弟通信

借助 “状态提升” 机制，通过父组件进行兄弟组件之间的数据传递。

实现步骤

A组件先通过子传父的方式把数据传递给父组件，父组件拿到数据后通过父传子的方式再传递给B组件

子组件A

export default function ChildA(props) {
  const { onGetAMsg } = props;
  return (
    <div>
      <button onClick={() => onGetAMsg("我是A的数据")}>我是A:点击发送数据</button>
    </div>
  );
}

父组件

import { useState } from "react";
import ChildA from "./ChildA";
import ChildB from "./ChildB";

export default function App() {
  let [dataA, setDataA] = useState("");
  const getMsg = (dataA) => {
    setDataA(dataA);
  };
  return (
    <>
      <ChildA onGetAMsg={getMsg} />
      <ChildB dataA={dataA} />
    </>
  );
}

子组件B

export default function ChildB(props) {
  return (
    <div>
      <h1>我是B:{props.dataA}</h1>
    </div>
  );
}

跨层通信

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

实现步骤

1. 使用 createContext 方法创建一个上下文对象ctx
2. 在顶层组件中通过 ctx的Provider组件 提供数据
3. 在底层组件中通过 useContext钩子函数 消费数据

ctx

import { createContext } from "react";
const ctx = createContext();
export default ctx;

顶层组件

import ctx from "./ctx";
import Son from "./Son";
export default function App() {
  const msg = "顶层组件的msg";
  const getPosterityMsg = (msg) => {
    console.log(msg);
  };
  return (
    <>
      <ctx.Provider value={{ msg, onGetPosterityMsg: getPosterityMsg }}>
        <Son />
      </ctx.Provider>
    </>
  );
}

中间组件

import Child from "./";
export default function Son() {
  return (
    <>
      <Child />
    </>
  );
}

底层组件

import { useContext } from "react";
import ctx from "./ctx";
export default function Child() {
  const value = useContext(ctx);
  console.log(value);
  return (
    <>
      <h1>{value.msg}</h1>
      <button onClick={()=>{value.onGetPosterityMsg('底层组件data')}}>底层组件发送数据</button>
    </>
  );
}