自定义上下文挂钩 TypeScript

Question

我正在尝试根据这个有趣的方法 todos-many-ways

使用上下文 API 的自定义挂钩

我在将它与数字的简单状态一起使用时遇到错误，理想情况下我会有一个更有意义的 setter 函数，但我只是在设置它时遇到错误。

import * as React from 'react'

const mainState = () => {
  const [edit, setEdit] = React.useState<number | null>(null)

  return {
    edit,
    clear: () => setEdit(null)
  }
}

const MainContext = () => React.createContext<ReturnType<typeof mainState> | null>(null)

// I get an error on `MainContext`: `...is not assignable to parameter of type 'Context<unknown>`
export const useMainContext = () => React.useContext(MainContext)

export function MainProvider({children}: {children: React.ReactNode}){
  return (
    <MainContext.Provider value={mainState()}>
      {children}
    </MainContext.Provider>
  )
}

Answer 1

尝试传递值而不是声明函数：

const MainContext = React.createContext<ReturnType<typeof mainState> | null>(null)

自定义上下文挂钩 TypeScript

Custom context hook TypeScript

typescript

reactjs

react-context