TypeScript报错TextArea组件rows属性不存在？求解决方案

你遇到的错误根源是使用了错误的React属性类型：InputHTMLAttributes是为原生<input>元素设计的属性集合，并不包含<textarea>专属的属性（比如rows、cols），因此TypeScript会判定rows属性不属于你的组件props类型。

修改方式很简单，将属性类型替换为React专门为<textarea>提供的TextareaHTMLAttributes即可：

import { TextareaHTMLAttributes } from 'react';
import classes from './Input.module.css';

interface InputProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
    errorMessage?: string;
}

const TextArea = ({ errorMessage, ...rest }: InputProps) => (
    <div
        className={classes.InputBox}
        error-message={errorMessage ?? 'Invalid Input Provided'}
    >
        <textarea {...rest} />
    </div>
);

export default TextArea;

TextareaHTMLAttributes<HTMLTextAreaElement>包含了所有原生<textarea>元素的合法属性，同时继承了通用表单元素的属性（比如value、onChange），完全适配你的组件需求，修改后rows等属性就能被TypeScript正确识别。

内容的提问来源于stack exchange，提问作者Shivam Sahil