将使用什么类型将 JSX 元素的属性抽象为对象？答案

【问题标题】：What type would be used for abstracting a JSX element's attributes into an object?将使用什么类型将 JSX 元素的属性抽象为对象？
【发布时间】：2018-07-31 01:00:08
【问题描述】：

我对 typescript 还比较陌生，这已经成为一种好奇心，而不是需要让它发挥作用。

如果我将 html 输入的属性抽象为它自己的对象，那么 fileInputAttrs 的类型会是什么？我查看了 JSX.IntrinsicElements 等，但似乎找不到 <input type='file'> 的本机属性的接口

render() {
    const fileInputAttrs: SomeType = {
        type: 'file',
        multiple: true,
        ref: (input: HTMLInputElement) => this.elFileInput = input,
        onChange: () => this.handleSelectedFile()
    };

    return (
        <div className={'blah'}>
            <input  {...fileInputAttrs} />
        </div>
    );
}

【问题讨论】：

标签： reactjs typescript jsx

【解决方案1】：

您可以查看React definition file。在这种情况下，它将是 React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> 即：

const fileInputAttrs: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> = {
    type: 'file',
    multiple: true,
    ref: (input: HTMLInputElement) => this.elFileInput = input,
    onChange: () => this.handleSelectedFile()
};

【讨论】：