umi跨组件传值（umi跨域）

在 umi 框架中，可以通过以下方式实现跨组件之间的数据传递：

1. 使用 props 属性：将父组件中的数据通过 props 传递给子组件。这是最简单也是最常用的一种方式。

jsCopy Code// 父组件
import { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent(props) {
  const [data, setData] = useState('hello');

  return (
    <div>
      // 通过 props 将 data 传递给子组件
      <ChildComponent data={data} />
      <button onClick={() => setData('world')}>Change Data</button>
    </div>
  );
}

// 子组件
function ChildComponent(props) {
  const { data } = props;

  return <div>{data}</div>;
}

export default ParentComponent;

2. 使用 context 上下文：使用 React 提供的 context 上下文可以在跨越多个层次结构的组件之间共享数据。

jsCopy Code// 创建 context 对象
import React from 'react';

const DataContext = React.createContext();

export default DataContext;

// 父组件
import { useState } from 'react';
import DataContext from './DataContext';
import ChildComponent from './ChildComponent';

function ParentComponent(props) {
  const [data, setData] = useState('hello');

  return (
    // 将需要共享的数据放入 context.Provider 组件的 value 中
    <DataContext.Provider value={{ data, setData }}>
      <ChildComponent />
      <button onClick={() => setData('world')}>Change Data</button>
    </DataContext.Provider>
  );
}

// 子组件
import { useContext } from 'react';
import DataContext from './DataContext';

function ChildComponent(props) {
  const { data } = useContext(DataContext);

  return <div>{data}</div>;
}

export default ParentComponent;

3. 使用 Redux 状态管理：Redux 是一种流行的状态管理工具，它可以在整个应用程序中轻松地共享数据。

jsCopy Code// 安装和配置 Redux
npm install redux react-redux

// 创建 store 对象
import { createStore } from 'redux';

const initialState = { data: 'hello' };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'setData':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

// 父组件
import { useDispatch, useSelector } from 'react-redux';
import ChildComponent from './ChildComponent';

function ParentComponent(props) {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  return (
    <>
      <ChildComponent data={data} />
      <button onClick={() => dispatch({ type: 'setData', payload: 'world' })}>Change Data</button>
    </>
  );
}

// 子组件
function ChildComponent(props) {
  const { data } = props;

  return <div>{data}</div>;
}

export default ParentComponent;

以上是 umi 框架中实现跨组件之间的数据传递的三种方式，您可以根据具体场景选择最合适的方式来进行实现。