React TypeScript 跨组件传递函数及定义prop类型的正确方法

解决方案 #

你需要为子组件显式定义Props类型，其中useState返回的修改函数可以直接使用React内置的标准类型定义。

子组件TSX改造（含Props类型定义） #

import { Dispatch, SetStateAction, FC } from 'react'

// 自定义子组件Props类型
type ShowNotificationProps = {
  notification: string[]
  // SetStateAction泛型和对应state的类型保持一致即可
  setnotification: Dispatch<SetStateAction<string[]>>
}

// 给组件绑定Props类型，附带修复原代码未返回JSX、列表项未渲染实际内容的问题
const ShowNotification: FC<ShowNotificationProps> = ({notification, setnotification}) => {
  return (
    <ul>
      {notification.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  )
}

export default ShowNotification

父组件TSX改造 #

只需要给useState补充显式泛型，避免隐式类型推导出现偏差：

import { useState } from 'react'
import ShowNotification from './ShowNotification'

export default function Notification() {
  // 声明state的类型为字符串数组
  const [notification, setnotification] = useState<string[]>(['alert', 'booking'])

  return (
    <div>
      <ShowNotification setnotification={setnotification} notification={notification} />
    </div>
  )
}

核心类型说明 #

• FC<PropsType>：React内置的函数组件类型，自动处理children等默认属性的类型校验
• Dispatch<SetStateAction<T>>：React官方提供的标准类型，专门用来匹配useState返回的修改函数类型，泛型T和对应state的类型保持一致即可
• 如果你不想使用FC类型，也可以直接对解构的props参数单独声明类型，写法如下：

const ShowNotification = ({notification, setnotification}: ShowNotificationProps) => {
  // 组件逻辑不变
}

内容的提问来源于stack exchange，提问作者Sanket Patil