使用自定义挂钩反应上下文和打字稿

Question

我使用 React & Chakra 创建了以下上下文提供程序-UI:

import { useBoolean } from "@chakra-ui/react"
import { createContext } from "react"

const MobileContext = createContext<typeof useBoolean | undefined>(undefined)

function MobileProvider({ children }) {
  const [show, setShow] = useBoolean(false)

  return (
    <MobileContext.Provider value={{ show, setShow }}>
      {children}
    </MobileContext.Provider>
  )
}

不幸的是，上面的代码似乎不起作用。我在 value={{ show, setShow }} 中的 show 下收到一条红色波浪线，并显示以下消息：

Type '{ 
  show: boolean; 
  setShow: { 
    readonly on: () => void; 
    readonly off: () => void;  
    readonly toggle: () => void; 
  }; 
}' is not assignable to type 
  '(initialState?: InitialState) => 
  readonly [
      boolean, 
      { 
        readonly on: () => void; 
        readonly off: () => void; 
        readonly toggle: () => void; 
      }
   ]'.
  

Object literal may only specify known properties, and 'show' does not exist in type 

  '(initialState?: InitialState) => 
    readonly [
      boolean, 
      { 
        readonly on: () => void; 
        readonly off: () => void; 
        readonly toggle: () => void; 
      }
   ]'
   .ts(2322)
   index.d.ts(336, 9): 

The expected type comes from property 'value' which is declared here on type 
  'IntrinsicAttributes & ProviderProps<(initialState?: InitialState) => 
    readonly [
      boolean, 
      { 
         readonly on: () => void; 
         readonly off: () => void; 
         readonly toggle: () => void; 
      }
    ]
  >'

我想我明白了问题所在——useBoolean 的 return 值与 show 和 setShow 不完全相同（虽然也许我我错了）。无论哪种方式，我都不知道如何让它正常工作。

有什么想法吗？

谢谢。

Answer 1

由于您提供 useBoolean 的 return 值 ，并且您以不同的方式塑造上下文值，您应该替换

const MobileContext = createContext<typeof useBoolean | undefined>(undefined)

有

type UseBooleanReturn = ReturnType<typeof useBoolean>

const MobileContext = createContext<{show: UseBooleanReturn[0], setShow: UseBooleanReturn[1] } | undefined>(undefined)

使用自定义挂钩反应上下文和打字稿

React Context & Typescript with Custom Hook

typescript

reactjs

react-context