import React useRef from react;import PageContainer from componentsPageContainer;import ProCard from componentsProCard;import UserLog from componentsUserLog;import Policy from Policy;import PrimaryC

可以通过使用React的Context来实现组件之间的通信。首先，创建一个Context对象，并在根组件中使用Provider包裹需要共享数据的组件。然后，在需要调用接口的组件中使用Consumer来获取数据并进行相应操作。

首先，创建一个Context对象：

const MyContext = React.createContext();

export default MyContext;

在根组件中使用Provider包裹需要共享数据的组件，并将接口函数作为value传递给Provider：

import MyContext from './MyContext';

const Module: React.FC = () => {
  const inforRef = useRef<ConfigRef>(null);

  const reloadLists = () => {
    inforRef?.current?.reload?.();
    inforRef?.current?.getUpdate?.();
  };

  return (
    <PageContainer>
      <MyContext.Provider value={{ reloadLists }}>
        <ProCard>
          <Policy />
          <PrimaryClass ref={inforRef} />
          <Secondary />
        </ProCard>
      </MyContext.Provider>
    </PageContainer>
  );
};

export default Module;

在需要调用接口的组件中使用Consumer来获取数据并进行相应操作：

import MyContext from './MyContext';

const Policy = () => {
  return (
    <MyContext.Consumer>
      {({ reloadLists }) => (
        <button onClick={reloadLists}>Reload Lists</button>
      )}
    </MyContext.Consumer>
  );
};

export default Policy;

import MyContext from './MyContext';

const Secondary = () => {
  return (
    <MyContext.Consumer>
      {({ reloadLists }) => (
        <button onClick={reloadLists}>Reload Lists</button>
      )}
    </MyContext.Consumer>
  );
};

export default Secondary;

这样就可以在Policy和Secondary组件中调用PrimaryClass组件的接口函数reloadLists了