一、父组件向子组件通信
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>);};
