两个语句几乎可以回答所有react问题：
1.不改变状态（此处不适用）
1.提升状态（这是您问题的答案）。
创建一个context -将应用程序 Package 在其中，并使用任何组件useContext来打开一个包含任何组件的模态：

export const ModalContext = React.createContext();

const ModalProvider = ({children}) => {
  const [modalContent,setModalContent] = useState();

  return (
     <ModalContext.Provider value={
       useMemo(() => ({
        hide:() => setModalContent(),
        open:setModalContent
       }),[]
     }>
       {modalContent ? <Modal>{modalContent}</Modal> : null}
       {children}
     </ModalContext.Provider>
  )  
}

字符串
将应用程序 Package 在ModalProvider组件中，以便上下文对所有组件都可用：

const AdminDashboard = () => (
   <ModalProvider>
    <OtherComponents/>
   </ModalProvider>
)

型
SomeLink，位于AdminDashboard内部任何位置的组件都可以使用React.useContext访问ModalProvider中的状态

const SomeLink = () => {
   const { open } = React.useContext(ModalContext);

   return (
     <button onClick={() => open(<SomeModalContent/>)}>Click to Open!</button>
   )

}

型

如果你想从任何地方访问它，你需要使用全局状态（如Redux或Mobx）
如果你想从父组件控制它，你可以使用useRef

不是最“React”的解决方案，但我不喜欢解决所有的“React”，就像这里是我如何解决我的特定用例。
1.创建具有静态访问权限的类。
1.将modal放在DOM树的高/外部
1.在模态组件中设置必要的访问权限

HelperClass

export class ModalHelper {
    private static openFunction: (state: boolean) => void;
    public static setOpenFunction(f: (state: boolean) => void) {
        ModalHelper.openFunction = f;
    }
    public static setOpen(state: boolean) {
        if (ModalHelper.openFunction) {
            ModalHelper.openFunction(state);
        } else {
            console.error("ModalHelper called before setOpenFunction")
        }
    }
}

字符串

样本模态分量

export function ExplainerModal() {
    const [open, setOpen] = useState(false);

    useEffect(() => {
        ModalHelper.setOpenFunction(setOpen);
        return () => {
            ModalHelper.setOpenFunction(undefined);
        };
    }, []);

    return <>I'm a modal</>
}

型

从任何地方拨打

ModalHelper.setOpen(true);

型
现在请记住，这只适用于一个模态，但当然可以进一步调整以处理多个模态（例如：通过为函数添加dict等）