react兄弟组件之间的通讯

组件一为父组件,组件二和组件三是子组件。

一、状态提升

如果组件二想要向组件三传值,先把组件二中的值通过自定义事件穿到父组件,在通过父组件向组件三挂载属性进行传值。

二、发布订阅

同上例,全局定义bus对象

const bus={

    list:[],

    subscribe(callback){

        bus.list.push(callback)

},

    publish(val){

        bus.list.forEach(item=>

          item  &&item(val)

}

}

在组件三中componentDidMount()

生命周期中调用bus.scribe((val)=>{

    拿到组件二传来的值进行后续业务逻辑

}

在组件二中某个事件触发后调用bus.publish(val)把组件二中的值传给组件三

三、context

context是react官方提供的兄弟之间通讯的方法

首先在全局创建context

const GlobalContext = React.createContext()

在组件一中的return中用包裹

在组件二或组件三中的return中用包裹,在里面写一个箭头函数,形参val接受父组件传来的值,在剪头函数中returnHTML结构

你可能感兴趣的:(react.js,前端框架)