React中的通讯组件

1.父传子:
    传递:当子组件在父组件中当做标签使用的时候,给当前 子组件绑定一个自定义属性,值为需要传递的数据
    接收:在子组件内部通过 this.props进行接收
2.子传父
    传递:在子组件内部通过调用 this.props身上传递过来的方法,将值传递过去
    接收:当子组件在父组件中当做标签使用的时候,给当前的 子组件绑定一个自定义的属性,值为一个函数,接收的时候通过这个函数的参数进行接收
3.非父子
    封装observer,里面有封装的$on $off $emit,通过$emit传递,$on 接收
4.Fragment:
    react内置组件,不会当做标签渲染到页面上,一般情况下用来做包裹使用
5.当在组件内写标签,其他组件接收不到,用 {children}接收,类似于vue中的slot

转载于:https://www.cnblogs.com/xuazi-7an/p/10772636.html

React Umi ,可以使用以下几种方式进行跨组件通讯: 1. 属性传递 在父组件定义一个 state 或者 props,然后通过 props 将数据传递给子组件。 2. Context Context 是一种在组件共享数据的方式,它可以避免通过 props 层层传递数据的繁琐。 使用 Context 的步骤如下: 1)创建一个 Context 对象 ```jsx const MyContext = React.createContext(defaultValue); ``` 2)在父组件使用 Provider 提供数据 ```jsx <MyContext.Provider value={value}> <ChildComponent /> </MyContext.Provider> ``` 3)在子组件使用 Consumer 获取数据 ```jsx <MyContext.Consumer> {value => /* 根据 value 渲染子组件 */} </MyContext.Consumer> ``` 3. Redux Redux 是一种状态管理库,它可以让应用的所有组件共享一个数据源。通过在组件 dispatch action 来改变应用状态,并通过 connect 方法将组件与 Redux 连接起来。 使用 Redux 的步骤如下: 1) 创建一个 store 对象 ```js import { createStore } from 'redux'; const reducer = (state, action) => { // 根据 action 更新 state }; const store = createStore(reducer, initialState); ``` 2) 在组件 dispatch action 来更新应用状态 ```js import { connect } from 'react-redux'; import { updateState } from './actions'; const MyComponent = ({ state, updateState }) => { const handleClick = () => { updateState(newState); }; return <button onClick={handleClick}>{state}</button>; }; const mapStateToProps = state => ({ state }); const mapDispatchToProps = { updateState }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); ``` 其,updateState 是一个 action creator,它返回一个 action 对象,用于更新应用状态。 4. EventBus EventBus 是一种基于事件的通讯方式,它可以让任意组件之间相互通讯。 使用 EventBus 的步骤如下: 1)创建一个 EventBus 对象 ```js const eventBus = new EventEmitter(); ``` 2)在发送事件的组件 emit 事件 ```js eventBus.emit('eventName', eventData); ``` 3)在接收事件的组件监听事件 ```js componentDidMount() { eventBus.on('eventName', this.handleEvent); } componentWillUnmount() { eventBus.off('eventName', this.handleEvent); } handleEvent = eventData => { // 处理事件 }; ``` 以上是 React Umi 组件通讯的几种方式。根据实际情况选择合适的方式进行通讯
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值