useContext共享单页面状态

项目背景

汉得平台搭建的仓储管理系统，有许多表格页面，每个页面都是一个独立的页面，与其他页面无相关，所以这个项目没有用一些页面之间共享状态的组件，而这个项目是单页面共享状态的，在最外层的父元素使用<StoreProvider>包裹，可以让所有嵌套的子组件可以访问到Store。

项目结构

详细代码

// stores/index.tsx
import React, { createContext, useMemo } from 'react';
import { DataSet } from 'choerodon-ui/pro';
import getTableDSProps from './tableDS';

const Store = createContext<
  Partial<{
    children: React.ReactElement;
    tableDs: DataSet;
  }>
>({});

export default Store;

/**
 * 导出一个Provider 便于多层数据传递
 */
export const StoreProvider = (props: { children: React.ReactElement }) => {
  const { children } = props;
  const tableDs = useMemo(() => new DataSet(getTableDSProps()), []);
  const value = {
    ...props,
    tableDs,
  };

  return <Store.Provider value={value}>{children}</Store.Provider>;
};

在主页面使用StoreProvider包裹

//这里的StandardTableWrapper是汉得的组件
const StandardTableWrapper: React.FC = props => {
  return (
    <StoreProvider>
      <StandardTable {...props} />
    </StoreProvider>
  );
};

这样就可以在StandardTable用useContext接受数据啦。

const StandardTable: React.FC<{}> = props => {
  const { tableDs } = React.useContext(Store)
  ...
  return (
    ...
  )
}