Reactjs 在 ReactTypescript 中使用 ...rest 属性类型判断 forwardRef

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

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

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

Reactjs相关问答推荐

如何使用react-router-dom导航到网页中的其他路由？

呈现组件元素(MAP)中的问题

在一个地方调用函数会影响其他地方调用该函数

React：关于useEffect钩子如何工作的困惑

react 挂钩-使用有效澄清

自定义变量默认、聚焦和填充时所需TextField中标签的星号 colored颜色

如何在MUI x图表条形图上放置圆角？

console.logs 没有显示在浏览器控制台上，但显示在我的终端上

useRef.current.value 为空值

BrowserRouter改变了URL但没有链接到页面

React Native 背景动画反转

使用新数据更新时，React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

Recharts 笛卡尔网格 - 垂直线和水平线的不同样式

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

如何在不重新加载页面的情况下加载新添加的数据？

Reactjs 表单未反映提交时的更改

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

如何在 React JS 上使文本中的单词可点击

当页面重新加载react 路由导航到第一页 v6

如何在 React 中制作动画？