React.useRef 用于 ChakraUI Toast

Question

根据脉轮文档中的以下示例代码，我无法确定我需要为 React.useRef() 提供什么类型：

function UpdatingToastExample() {
  const toast = useToast()
  const toastIdRef = React.useRef()

  function update() {
    if (toastIdRef.current) {
      toast.update(toastIdRef.current, { description: "new text" })
    }
  }

  function addToast() {
    toastIdRef.current = toast({ description: "some text" })
  }

  return (
    <Stack isInline spacing={2}>
      <Button onClick={addToast} type="button">
        Toast
      </Button>

      <Button onClick={update} type="button" variant="outline">
        Update last toast
      </Button>
    </Stack>
  )
}

发件人：https://chakra-ui.com/docs/feedback/toast#updating-toasts

Typescript 显然希望我为 React.useRef() 提供类型，但我不知道该提供什么？

 const toastIdRef = React.useRef<WhatTypeShouldThisBe?>(null);

我正在使用 chakra-ui/react v1.6.7 和 typescript 4.2.4。

Answer 1

好像不是字符串就是数字:

const toastIdRef = React.useRef<number|string>(null);

看起来您可以导入 ToastId 类型：

Toast props

ToastId type

export type ToastId = string | number

import { useToast, ToastId } from "@chakra-ui/toast";

...

const toastIdRef = React.useRef<ToastId>(null);

React.useRef 用于 ChakraUI Toast

React.useRef for ChakraUI Toast

typescript

reactjs

chakra-ui