11 React 组件通信 父传子

在React中实现组件通信是非常常见的需求,其中包括父子组件通信。以下是几种常见的父子组件通信的例子,以及需要注意的知识:

  1. Props传递

    这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。

    js 复制代码
    // ParentComponent.js
    import React from 'react';
    import ChildComponent from './ChildComponent';
    
    function ParentComponent() {
        const data = "Hello from Parent";
        return <ChildComponent data={data} />;
    }
    
    // ChildComponent.js
    import React from 'react';
    
    function ChildComponent(props) {
        return <div>{props.data}</div>;
    }

    注意事项:

    • Props是只读的,子组件不能直接修改props,只能由父组件传递。
    • 父组件通过props将数据传递给子组件,子组件通过props接收数据。
  2. 回调函数传递

    父组件通过props将回调函数传递给子组件,子组件调用该函数来与父组件通信。

    js 复制代码
    // ParentComponent.js
    import React, { useState } from 'react';
    import ChildComponent from './ChildComponent';
    
    function ParentComponent() {
        const [message, setMessage] = useState("");
    
        const handleMessage = (msg) => {
            setMessage(msg);
        };
    
        return (
            <div>
                <ChildComponent handleMessage={handleMessage} />
                <p>Message from Child: {message}</p>
            </div>
        );
    }
    
    // ChildComponent.js
    import React from 'react';
    
    function ChildComponent(props) {
        const handleClick = () => {
            props.handleMessage("Hello from Child");
        };
    
        return <button onClick={handleClick}>Send Message</button>;
    }

    注意事项:

    • 父组件通过回调函数的形式将能够修改父组件状态的方法传递给子组件。
    • 子组件调用该回调函数来通知父组件发生了某些事件或状态变化。
  3. Context API

    React的Context API允许您在组件树中传递数据,而无需在每个层级手动传递props。

    js 复制代码
    // MyContext.js
    import React from 'react';
    
    const MyContext = React.createContext();
    
    export default MyContext;
    
    // ParentComponent.js
    import React from 'react';
    import ChildComponent from './ChildComponent';
    import MyContext from './MyContext';
    
    function ParentComponent() {
        return (
            <MyContext.Provider value="Hello from Context">
                <ChildComponent />
            </MyContext.Provider>
        );
    }
    
    // ChildComponent.js
    import React, { useContext } from 'react';
    import MyContext from './MyContext';
    
    function ChildComponent() {
        const data = useContext(MyContext);
        return <div>{data}</div>;
    }

    注意事项:

    • Context API适用于在组件树中传递全局数据,但在小型应用中不建议滥用。
    • 可以在整个组件树中访问Context提供的值,而不需要手动将props逐层传递给每个子组件。

在实现组件通信时,需要注意以下几点:

  • 父子组件之间的通信应该保持单向数据流,即父组件向子组件传递数据或回调函数,而不是相反。
  • 避免直接修改props,props应该被视为不可变的。
  • 使用适当的方法传递数据,如Props传递、回调函数、Context API等,根据具体场景选择合适的方式。
  • 尽量将通信逻辑封装在组件内部,使组件更加可重用和独立。
相关推荐
江拥羡橙4 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
千码君20164 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
楼田莉子6 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝6 小时前
Vue总结
前端·javascript·vue.js
木易 士心6 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER6 小时前
Web 开发 21
前端·学习
又是忙碌的一天6 小时前
前端学习day01
前端·学习·html
Joker Zxc6 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel7 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld7 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端