Question

我有一个名为StatusContext的上下文，如下所示：

export const statusCtxInit = {
    open: false,
    toggleOpen() {
        this.open = !this.open;
    }
};

const StatusContext = React.createContext(statusCtxInit);
export default StatusContext

整个应用程序都与提供程序包装在一起：

// ...
<StatusContext.Provider value={statusCtxInit}>
// ...

要使用我的上下文的值，我在FC中使用useContext，当我获得该值时它就起作用。

function MyComp() {
    const status = useContext(StatusContext);
    return (
        <div>
            {status.open
                ? `It's Open`
                : `It's Closed`}

            <button onClick={() => status.toggleOpen()}>
                Toggle
            </button>
        </div>
    )
}

export default MyComp

另一方面，我也想通过调用toggleOpen来更改上下文，但是它不能按我的意愿工作。实际上，该值会更改，但不会影响MyComp。

我做错了什么？我该怎么办？

Answer 1

 const statusContext = React.createContext();

 const {Provider} = statusContext;
 //custom provider
 export const StatusProvider = ({children}) => {
 const [isOpen, setOpen] = React.useState(false);
 const toggle = () => setOpen(v => !v);
 return(
  <Provider value={{isOpen, toggle}}>
    {children}
  </Provider>

 )
}

//custom hook
export const useStatus = () => useContext(StatusContext);



 //usage
    function MyComp() {
    const status = useStatus();
    return (
        <div>
            {status.isOpen
                ? `It's Open`
                : `It's Closed`}

            <button onClick={() => status.toggle()}>
                Toggle
            </button>
        </div>
    )
}

export default MyComp

如何更改功能组件中的上下文值？

1 个答案: