对于思考题这是我的想法： import React, {useContext, useReducer} from 'react' import {reducer, ModalContext} from "./NiceModal/modalContext"; import Demo1 from "./demo1"; const Main = () => { const context = useContext(ModalContext) const [state, dispatch] = useReducer(reducer, context.state) return ( <ModalContext.Provider value={{ state, dispatch, }}> <Demo1/> </ModalContext.Provider> ) } export default Main 创建useNiceModal： const useNiceModal = (modalId) => { const {state, dispatch} = useContext(ModalContext) const args = state[modalId] const show = useCallback((args) => { dispatch({ type: 'show', modalId, args }) }, [modalId, args, dispatch]) const hide = useCallback(() => { dispatch({ type: 'hide', modalId }) }, [dispatch, modalId]) return { show, hide, args, visible: !!args, } } export default useNiceModal 在Demo1中： const Demo1 = () => { const modalId = 'my-first-modal' const Content = (props) => { return ( <div>Hello world!</div> ) } const MyModal = createNiceModal({ modalId, title: '这是我的标题', content: '这是我的内容' }, Content) const modal = useNiceModal(modalId) return ( <div> <button onClick={() => modal.show()}> 打开弹窗 </button> <MyModal/> </div> ) } export default Demo1