React 實現爺孫組件間相互通信

Posted on by

前言

最近在學習React，給大傢總結下跨組件通信中，爺孫組件之間怎麼相互通信。簡單明瞭上代碼直接一把梭，不多解釋。

爺孫組件間通信

案例如下：

代碼：

//跨組件通信
import React, { Component } from 'react'
//創建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>
                {/* 改變數據孫組件也更新 */}
                <button onClick={() => this.handelClick()}>updated</button>
                {/* 傳入state對象和foo回調函數 */}
                {/* foo函數用於孫組件和爺組件通信 */}
                <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() {
        // 解構
        const { nickName, level, foo } = this.context
        return (
            <div>
                <h2>兒子組件</h2>
                <h3>nickname:{nickName}</h3>
                <h3>level:{level}</h3>
                {/* 下面兩種調用方式都可以 */}
                {/* 改變爺組件的數據 */}
                <button onClick={() => this.handelClick()}>updated</button>
                <button onClick={() => foo('牛霸天', 18)}>updated</button>
            </div>
        )
    }
    handelClick() {
        this.context.foo('牛霸天', 18)
    }
}
// 接受爺組件傳遞的值
Son.contextType = UserMessage

爺給孫組件通信就不多說瞭，直接創建context傳入默認對象，然後在爺組件用該創建名創建對象包裹父組件，通過value傳值過去，然後在孫組件Son.contextType 進行接收，在this.context取值即可。

孫給爺傳值則是和子跟父傳值的道理一樣，通過傳入回調函數來進行修改。

到此這篇關於React 四線爺孫組件間相互通信的文章就介紹到這瞭,更多相關React組件通信內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：