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

Posted 2023-03-16

【中文标题】如何更改功能组件中的上下文值？

【英文标题】：How to change context value in functional component?

【发布时间】：2020-05-10 03:50:56

【问题描述】：

我有一个名为 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。

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

【问题讨论】：

statusCtxInit 不是 React 有状态组件

@DennisVash 我不知道你写了什么。是的，它只是一个简单的对象

@gaditzkhori 我不知道你写了什么。是的，它只是一个简单的对象

【参考方案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