reactjs - Typescript - 如何使用现有属性扩展接口(interface)？

Question

我正在使用 Typescript 通过 React 构建一个 UI 系统。我想创建一个 <Input />组成一个真正的组件 <input /> .组件 <Input />应该接受 <input /> 接受的每个属性作为 Prop .

为了这样做，我检查了<input />在 React 中接受，这就是结果:

React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

一开始，我是这样设置界面的:

interface InputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

但是太长了，看不懂。所以我考虑使用 Pick :

interface InputProps extends Pick<JSX.IntrinsicElements, 'input'>`

但它只是将 input 添加到界面属性本身，而不是实际扩展它:

interface Props extends ...  {}

const Input = (props: Props) => {
    return <input {...props} />
}

Answer 1

native 输入的接口(interface)是 HTMLInputElement

interface InputProps extends HTMLInputElement {}

与 React Prop 的接口(interface)

import { InputHTMLAttributes } from "react";

interface InputProps extends InputHTMLAttributes<HTMLInputElement>

访问引用使用转发引用:

const MyInput = React.forwardRef((props, ref) => {
  return(<input {...props} ref={ref} />);
});