时间戳

首页 > 解决方案 > 如何使用 react 和 typescript 在同一组件文件中使用上下文？

reactjs - 如何使用 react 和 typescript 在同一组件文件中使用上下文？

问题描述

我想访问从一个组件到另一个组件的状态。为此，我只想将 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>
    );
}

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

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

标签： reactjstypescript

解决方案

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

这是一个演示它的代码框。

推荐阅读