React组件间的通信

2024-01-07 18:19:44

在React中,组件间的通信可以通过以下几种方式实现:

  1. 父子组件通信

    • 父组件通过props向子组件传递数据或回调函数。
    • 子组件通过props接收数据或回调函数,并在需要时调用回调函数向父组件传递数据。
    // 父组件
    function ParentComponent() {
    const handleChildMessage = (message) => {
    console.log("Child message received:", message);
    };
    return (
    <div>
    <h1>Parent Component</h1>
    <ChildComponent onMessage={handleChildMessage} />
    </div>
    );
    }
    
    // 子组件
    function ChildComponent({ onMessage }) {
    const handleButtonClick = () => {
    const message = "Hello from Child Component!";
    onMessage(message); // 调用回调函数向父组件传递数据
    };
    return (
    <div>
    <h2>Child Component</h2>
    <button onClick={handleButtonClick}>Send Message</button>
    </div>
    );
    }
  2. 兄弟组件通信

    • 兄弟组件间通信通常通过共同的父组件来实现。父组件作为中间件,将需要传递的数据或事件存储在父组件的状态中,然后通过props将数据或事件传递给需要接收的子组件。
    // 父组件
    function ParentComponent() {
    const [message, setMessage] = useState("");
    const handleChildMessage = (newMessage) => {
    setMessage(newMessage); // 更新父组件状态中的消息
    };
    return (
    <div>
    <h1>Parent Component</h1>
    <ChildComponent1 message={message} onMessage={handleChildMessage} />
    <ChildComponent2 message={message} />
    </div>
    );
    }
    
    // 子组件(兄弟组件)
    function ChildComponent1({ message, onMessage }) {
    const handleButtonClick = () => {
    onMessage("Hello from Child Component 1!"); // 更新父组件状态中的消息
    };
    return (
    <div>
    <h2>Child Component 1</h2>
    <button onClick={handleButtonClick}>Send Message</button>
    </div>
    );
    }

文章来源:https://blog.csdn.net/m0_73481765/article/details/135377235
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。