React組件通信實(shí)現(xiàn)流程詳解

更新時(shí)間：2022年12月01日 09:49:34 作者：花鐺

這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個(gè)重要的知識點(diǎn)，本文通過實(shí)例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下

組件間的關(guān)系

父子組件
兄弟組件
祖孫組件

通信方式

通過 props 方式傳遞數(shù)據(jù)。
Context 方式（一般用于祖孫組件通信）。
集中式狀態(tài)管理 Redux（一般用于很多組件間都要共享數(shù)據(jù)的情況下）。

父子組件通信

父子組件通信一般通過 props 方式傳遞數(shù)據(jù)。

父組件向子組件傳遞數(shù)據(jù)：

父組件通過向子組件傳遞 props，子組件得到 props 后進(jìn)行相應(yīng)的處理。

// Parent.js
import React, { Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
    render(){
        return(
            <div>
            	// 父組件通過 props 向子組件傳遞參數(shù)
                <Child title = "父組件向子組件通信" />
            </div>
        )
    }
}
// Child.js
import React,{ Component } from "react";
export default class Child extends Component{
    render(){
        return(
        	// 子組件通過 this.props 接收父組件傳遞過來的參數(shù)
            <div>{this.props.title}</div>
        )
    }
}

子組件主動(dòng)觸發(fā)父組件方法，向父組件傳遞數(shù)據(jù)：

父組件將一個(gè)函數(shù)作為 props 傳遞給子組件，子組件調(diào)用該函數(shù)，便可以向父組件通信。

// 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(){
		// 子組件接收并調(diào)用父組件傳遞過來的方法
		this.props.handleChange(‘我是子組件傳給父組件的值')
	}
    render(){
        return(
           <button onClick={this.handleClick}>按鈕</button>
        )
    }
}

父組件主動(dòng)觸發(fā)子組件方法，獲取子組件數(shù)據(jù)：

// Parent.js
import React,{ Component } from "react";
import Child from "./Child.js";
export default class Parent extends Component{
	childRef = React.createRef()
	handleClick(val){
	    //父組件觸發(fā)子組件方法
		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(){
		// 子組件執(zhí)行邏輯操作
		...
		// 子組件返回?cái)?shù)據(jù)，傳遞給父組件
		// return {}
	}
    render(){
        return(
           <button onClick={this.handleChange}>按鈕</button>
        )
    }
}

到此這篇關(guān)于React組件通信實(shí)現(xiàn)流程詳解的文章就介紹到這了,更多相關(guān)React組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: