React组件通信实现流程详解

时间:2022-12-01 花铛人气:0

组件间的关系

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

通信方式

通过 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>
        )
    }
}

加载全部内容