React通信

南山隐士 2022年06月25日 28 0

父传子

/* 父传子 */

const Parent = () => {
    return <Child name="YaoJin"></Child>
}

const Child = props => {
    return <span>{props.name}</span>
}


export default  Parent

父传子很简单, 只需要通过props将数据传递给对应子组件即可

子改变父

props是不可以改变的, 所以我们只能给予子组件一个函数, 让子组件触发这个函数来改变父的props


/* 子改变父的props */
export default class Parent extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            name:'YaoJin'
        }
    }
    changeProps = name => {
        this.setState({
            name
        })
    }
    render () {
        return <Child name={this.state.name} changeProps={this.changeProps}></Child>
    }
}

const Child = props => {
    return (
    <div>
        <span>{props.name}</span>
        <span onClick={() => props.changeProps('遥近')}>改变文本</span>
    </div>)
}

跨级通信


/* 跨层级通信 */
/* 创建Context */
const ThemeContext = React.createContext({
    color: 'red',
    changeTheme: () => {}
})

export default class Parent extends React.Component {
    constructor (props) {
        super(props)
        this.changeTheme = color => {
            this.setState({
            color
            })
        }
        this.state = {
            color: 'red',
            changeTheme: this.changeTheme
        }
    }
    render () {
       return (
            <ThemeContext.Provider value={this.state}>
                <MiddleChild />
            </ThemeContext.Provider>
        )
    }
}

const MiddleChild = () => {
    return (<GrandChild/>)
}

class GrandChild extends React.Component {
    render () {
        return (
            <ThemeContext.Consumer>
                {
                    ({ color, changeTheme }) => {
                            return (
                                <div>
                                    <h1>{color}</h1>
                                    <button onClick={() => changeTheme('green')}>改变祖先props</button>
                                </div>
                            )
                    }
                    
                }
            </ThemeContext.Consumer>
        )
    }

通过创建context来让更深层的组件通过Consumer来获取到离其最近的provider值

Last Updated: 2022/06/25 19:16:13
React Hook速览 React生命周期