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