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 (
    <div
      style={{
        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 (
    <div
      style={{
        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>
  );
}