React?實(shí)現(xiàn)爺孫組件間相互通信

更新時(shí)間：2022年08月08日 14:56:05 作者：vs心動(dòng)???????

這篇文章主要介紹了React實(shí)現(xiàn)爺孫組件間相互通信，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下

前言

最近在學(xué)習(xí)React，給大家總結(jié)下跨組件通信中，爺孫組件之間怎么相互通信。簡(jiǎn)單明了上代碼直接一把梭，不多解釋。

爺孫組件間通信

案例如下：

代碼：

//跨組件通信
import React, { Component } from 'react'
//創(chuàng)建context 給初始值
const UserMessage = React.createContext({
    nickName: 'yyy',
    level: 1
})

export default class TextSingal extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nickName: 'kkk',
            level: 99,
            name: 'ppp',
            age: 9999
        }
    }
    render() {
        const { name, age } = this.state
        return (
            <div>
                <h2>爺爺組件</h2>
                <h3>name:{name}</h3>
                <h3>age:{age}</h3>
                {/* 改變數(shù)據(jù)孫組件也更新 */}
                <button onClick={() => this.handelClick()}>updated</button>
                {/* 傳入state對(duì)象和foo回調(diào)函數(shù) */}
                {/* foo函數(shù)用于孫組件和爺組件通信 */}
                <UserMessage.Provider value={{ ...this.state, foo: (name, age) => this.updateDatas(name, age) }}>
                    <Father />
                </UserMessage.Provider>

            </div>
        )
    }
    handelClick() {
        this.setState({
            nickName: '虎威神',
            level: 9999
        })
    }
    updateDatas(name, age) {
        this.setState({
            name,
            age
        })
    }
}

class Father extends Component {
    render() {
        return (
            <div>
                <h2>爸爸組件</h2>
                <Son />
            </div>
        )
    }
}
class Son extends Component {
    render() {
        // 解構(gòu)
        const { nickName, level, foo } = this.context
        return (
            <div>
                <h2>兒子組件</h2>
                <h3>nickname:{nickName}</h3>
                <h3>level:{level}</h3>
                {/* 下面兩種調(diào)用方式都可以 */}
                {/* 改變爺組件的數(shù)據(jù) */}
                <button onClick={() => this.handelClick()}>updated</button>
                <button onClick={() => foo('牛霸天', 18)}>updated</button>
            </div>
        )
    }
    handelClick() {
        this.context.foo('牛霸天', 18)
    }
}
// 接受爺組件傳遞的值
Son.contextType = UserMessage

爺給孫組件通信就不多說了，直接創(chuàng)建context傳入默認(rèn)對(duì)象，然后在爺組件用該創(chuàng)建名創(chuàng)建對(duì)象包裹父組件，通過value傳值過去，然后在孫組件Son.contextType 進(jìn)行接收，在this.context取值即可。