react 父子组件通信

一、父组件向子组件通信

1. 原理

父组件可以将数据、函数或其他 JavaScript 对象作为`props`传递给子组件，子组件通过`props`接收并使用这些信息。

2. 示例

父组件传递 message 给子组件。

import { useState } from "react";

import ChildComponent from "./ChildComponent";



const ParentComponent = () => {

  const [message, setMessage] = useState("Hello from Parent");

  return (

    <div>

      <ChildComponent message={message} />

    </div>

  );

};

子组件通过`props`接收`message`。

const ChildComponent = (props) => {

  return (

    <div>

      <p>{props.message}</p>

    </div>

  );

};

二、子组件向父组件通信

1. 原理

父组件将一个函数作为`props`传递给子组件

2. 示例

点击子组件按钮传递消息给父组件。

import { useState } from "react";

import ChildComponent from "./ChildComponent";



const ParentComponent = () => {

  const [childMessage, setChildMessage] = useState("");

  const receiveMessageFromChild = (message) => {

    setChildMessage(message);

  };

  return (

    <div>

      <ChildComponent sendMessageToParent={receiveMessageFromChild} />

      <p>Message from child: {childMessage}</p>

    </div>

  );

};

在子组件中，通过调用从父组件接收的函数来传递数据。

const ChildComponent = (props) => {

  const handleClick = () => {

    const message = "Hello from Child";

    props.sendMessageToParent(message);

  };

  return (

    <div>

      <button onClick={handleClick}>Send Message to Parent</button>

    </div>

  );

};