react umi 跨组件通讯

在 React Umi 中，可以使用以下几种方式进行跨组件通讯：

1. 属性传递

在父组件中定义一个 state 或者 props，然后通过 props 将数据传递给子组件。

2. Context

Context 是一种在组件树中共享数据的方式，它可以避免通过 props 层层传递数据的繁琐。

使用 Context 的步骤如下：

1）创建一个 Context 对象

const MyContext = React.createContext(defaultValue);

2）在父组件中使用 Provider 提供数据

<MyContext.Provider value={value}>
  <ChildComponent />
</MyContext.Provider>

3）在子组件中使用 Consumer 获取数据

<MyContext.Consumer>
  {value => /* 根据 value 渲染子组件 */}
</MyContext.Consumer>

3. Redux

Redux 是一种状态管理库，它可以让应用中的所有组件共享一个数据源。通过在组件中 dispatch action 来改变应用状态，并通过 connect 方法将组件与 Redux 连接起来。

使用 Redux 的步骤如下：

1) 创建一个 store 对象

import { createStore } from 'redux';

const reducer = (state, action) => {
  // 根据 action 更新 state
};

const store = createStore(reducer, initialState);

2) 在组件中 dispatch action 来更新应用状态

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 对象

const eventBus = new EventEmitter();

2）在发送事件的组件中 emit 事件

eventBus.emit('eventName', eventData);

3）在接收事件的组件中监听事件

componentDidMount() {
  eventBus.on('eventName', this.handleEvent);
}

componentWillUnmount() {
  eventBus.off('eventName', this.handleEvent);
}

handleEvent = eventData => {
  // 处理事件
};

以上是 React Umi 中跨组件通讯的几种方式。根据实际情况选择合适的方式进行通讯。