React组件通信实现流程详解

目录

• 组件间的关系
• 通信方式
• 父子组件通信

组件间的关系

• 父子组件
• 兄弟组件
• 祖孙组件

通信方式

• 通过 props 方式传递数据。
• Context 方式（一般用于祖孙组件通信）。
• 集中式状态管理 Redux（一般用于很多组件间都要共享数据的情况下）。

父子组件通信

父子组件通信一般通过 props 方式传递数据。

父组件向子组件传递数据：

父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。

// Parent.js
import React, { Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
    render(){
        return(
            <div>
                // 父组件通过 props 向子组件传递参数
                <Child title = "父组件向子组件通信" />
            </div>
        )
    }
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
    render(){
        return(
                // 子组件通过 this.props 接收父组件传递过来的参数
            <div>{this.props.title}</div>
        )
    }
}

子组件主动触发父组件方法，向父组件传递数据：

父组件将一个函数作为 props 传递给子组件，子组件调用该函数，便可以向父组件通信。

// Parent.js
import React,{ Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
        handleChange(val){
                console.log(val) // 我是子组件传给父组件的值
        }
    render(){
        return(
            <div>
                // 父组件通过 props 把方法传递给子组件
                <Child handleChange={this.handleChange} />
            </div>
        )
    }
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
        handleClick(){
                // 子组件接收并调用父组件传递过来的方法
                this.props.handleChange(‘我是子组件传给父组件的值')
        }
    render(){
        return(
           <button onClick={this.handleClick}>按钮</button>
        )
    }
}

父组件主动触发子组件方法，获取子组件数据：

// Parent.js
import React,{ Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
        childRef = React.createRef()
        handleClick(val){
            //父组件触发子组件方法
                this.childRef.current.handleChange()    
        }
    render(){
        return(
            <div onClick={this.handleClick}>
                // 父组件通过 props 把方法传递给子组件
                <Child ref={this.childRef} />
            </div>
        )
    }
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
        handleChange(){
                // 子组件执行逻辑操作
                ...
                // 子组件返回数据，传递给父组件
                // return {}
        }
    render(){
        return(
           <button onClick={this.handleChange}>按钮</button>
        )
    }
}

原文地址：https://blog.csdn.net/wsln_123456/article/details/109157645