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

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

下面是在不应用上下文的情况下componnet的外观

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

---

我不知道怎么了。有人能帮我吗？谢谢。

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

---

这里有一个演示。

问题是，为了在UploadButton组件中使用useContext，您需要在react组件中将上下文提供程序提高一级。您不能将上下文提供程序放在UploadButton中以使用其上下文。您需要将提供程序移动到父组件中

---

这是一个演示。

谢谢，但它没有更新。一切似乎都很好，但这不起作用。@someuser2491更新了我的答案，我认为这是解决您问题的方法，但它没有更新。一切似乎都很好，但这不起作用。@someuser2491更新了我的答案，我认为这是你问题的解决方案