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等,根据具体场景选择合适的方式。
  • 尽量将通信逻辑封装在组件内部,使组件更加可重用和独立。
相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路5 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔5 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js