如何使用反应和打字稿在同一组件文件中使用上下文？

Question

我想从一个组件访问另一个组件的状态。为此，我只想将 contextprovider 包装到单击按钮时状态发生变化的组件，并从 usehook 返回状态，以便另一个组件可以访问该状态。

下面是在没有应用上下文的情况下组件的外观，

function UploadButton () { //this is where state is set
    const [isDialogOpen, setIsDialogOpen] = React.useState(false); 
     
    const handleClick = () => {
        setIsDialogOpen(!isDialogOpen);
    }
    return (
        <>
            <Button onClick={handleClick}/>
            {isDialogOpen && <Upload/>}
        </>
    ); 
}

function UserButton() { //this is where state is accessed
    return (
        <Icon/> //this icon should be displayed only if !isDialogOpen
    );
}

上下文如下所示，我在 UploadButton 所在的同一文件中有 DialogContext。

 interface DialogCtxState {
     isDialogOpen: boolean;
     setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }

 const initialDialogState: DialogCtxState = {
     isDialogOpen: false,
     setIsDialogOpen: () => {},
 };

 const DialogContext = React.createContext<DialogCtxState>(
     initialDialogState  
 );

 export const DialogContextProvider: React.FC = ({ children }) => {
     const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false); 

     return (
         <DialogContext.Provider
             value={{
                 isDialogOpen,
                 setIsDialogOpen,
             }}
         >
            {children}
         </DialogContext.Provider>
    );
}

function UploadButton () {
    const {isDialogOpen, setIsDialogOpen} = React.useContext(DialogContext);
     

    const handleClick = () => {
         setIsDialogOpen(!isDialogOpen);
         console.log('isDialogOpen', isDialogOpen) //prints false here.
    }

    return (
        <DialogContextProvider>
            <>
                <Button onClick={handleClick}/>
                {isDialogOpen && <Upload/>} //this doesnt render on clicking button as isDialogOpen 
                //is false
            </>
        </DialogContextProvider>
    );
}

上面的代码片段不会渲染上传组件，因为无论我是否单击按钮，isDialogOpen 始终为 false。

我不知道出了什么问题。有人可以帮我吗？谢谢。

Answer 1

问题是您需要将您的反应组件中的上下文提供程序移至更高一级才能useContext在您的UploadButton组件中使用。您不能将上下文提供程序放置在其中UploadButton以使用它的上下文。您需要将提供程序移动到父组件中。

这是一个演示它的代码和盒子。