React组件通信实现流程详解

// 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>
        )
    }
}

// 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>
        )
    }
}