React组件通信方式

Monday, April 19, 2021

父组件向子组件通信

React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息

// 父组件
const Parent = () => <Child name="york"></Child>

// 子组件
const Child = props => <p> {props.name} </p>

子组件向父组件通信

利用回调函数 利用自定义事件机制,即子组件通过调用父组件传递到子组件的方法向父组件传递消息的

// 父组件
function Parent() {
    const callback = msg => console.log(msg)
    return (
    	<Child callback=callback></Child>
    )
}

// 子组件
function Child(props) {
    return (
    	<div onClick={()=>props.callback('msg')}></div>
    )
}

跨级组件通信