react umi 跨组件通讯 具体例子

假设有两个组件 A 和 B，需要在 A 中点击按钮，然后将数据传递给 B 组件。

1. 在 A 组件中定义一个数据源，并将其存储在全局状态管理器中（如 dva 或 redux）：

import { connect } from 'dva';

function A({ dispatch }) {
  function handleClick() {
    dispatch({
      type: 'global/setData',
      payload: { data: 'hello world' },
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default connect()(A);

2. 在 B 组件中获取数据源，并使用 useEffect 监听数据源变化：

import { connect } from 'dva';
import { useEffect } from 'react';

function B({ data }) {
  useEffect(() => {
    console.log(data); // 输出 'hello world'
  }, [data]);

  return <div>B component</div>;
}

export default connect(({ global }) => ({
  data: global.data,
}))(B);

通过以上方式，A 组件点击按钮时会将数据写入全局状态管理器中，然后 B 组件会监听数据源的变化，并在数据变化时打印出来。这就完成了跨组件通讯的功能。