我正在努力让Typescript中的类型判断为使用forwardRef并具有...rest属性.

例子:

import React from 'react'

interface InputWithLabelProps {
  label: string,
  [rest: string]: unknown,
}

const InputWithLabel = React.forwardRef<HTMLInputElement, InputWithLabelProps>(
  ({ label, ...rest }, ref) => (
    <>
      <label htmlFor="field">{label}</label>
      <input id="field" ref={ref} {...rest} />
    </>
  ),
)

export default InputWithLabel

这将为组件提供以下签名:

(alias) const InputWithLabel: React.ForwardRefExoticComponent<Pick<InputWithLabelProps, keyof InputWithLabelProps> & React.RefAttributes<HTMLInputElement>>
import InputWithLabel

这将不会提供正确的类型判断,例如,不需要提供所需的标签属性.如果我删除forwardRef或...rest属性它可以工作,但这不是一个选项.

如何在具有以下内容的组件上使用forwardRef...rest属性并同时进行类型判断?

推荐答案

使用[rest: string]: unknown可以将任何字符串属性传递给输入元素,而这(我不理解为什么)会使其他属性类型变得无用.假设您想使用强制label或属于<input>元素的任何props 来键入组件,您可以使用以下任一方法来扩展此功能:

interface InputWithLabelProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string
}

或使用以下方式组合类型:

type InputWithLabelProps = {
    label: string
} & React.HTMLProps<HTMLInputElement>

Reactjs相关问答推荐

在 React JSX 返回中过滤 map 的最佳实践是什么

使用 React Router 中的参数重定向到父路由

如何以编程方式聚焦 React 中的按钮?

无法使 `hellosign-embedded` 与 TS 项目中的 `next/dynamic` 一起使用

从“react-router-dom”调用路由时页面变为空白

React Redux 私有路由最佳实践

如何使用 react-bootstrap 创建动态下拉列表

axios拦截器如何调用注销操作

使用 lodash debounce

Failed to compile. webpack is not a function

Next.js 的“build-time”究竟是什么时候发生的?

React 不会在路由参数更改或查询更改时重新加载组件数据

Next.js:带状态的 Router.push

React Router v4 路由不起作用

使用 React hook 实现自增计数器

Jest将对象传递给 expect().toBeCalledWith()

React 0.13 this.getDOMNode() 等价于 React.findDOMNode()

返回屏幕时未在 React Native 中调用 useEffect

如何在 React Native 中连接 JSX 组件

你如何使用 React.js 进行 SEO?