React组件使用ref报错：传递type等props存在类型不兼容问题

这个报错是因为TypeScript无法识别你传递给MyInput的type、placeholder等属性——你没有给组件定义合法的Props类型，导致TS认为这些属性不在组件的接收范围内。

解决方案：给组件添加正确的类型定义 #

因为你的组件是封装原生input，最简单的方式是复用原生input的属性类型，同时明确forwardRef的泛型参数：

修改MyInput.tsx（如果是jsx文件，建议改为tsx以获得更好的类型支持）：

import React, { forwardRef } from 'react'
import classes from './MyInput.module.css'

// 复用原生input的所有属性类型
type MyInputProps = React.InputHTMLAttributes<HTMLInputElement>

// forwardRef泛型参数：第一个是ref绑定的DOM元素类型，第二个是组件接收的Props类型
const MyInput = forwardRef<HTMLInputElement, MyInputProps>((props, ref) => {
    return (
        <input ref={ref} className={classes.myInput} {...props} />
    );
});

export default MyInput;

自定义Props类型（可选） #

如果你只想让组件接收特定属性，可以自定义类型并合并原生input的通用属性：

import React, { forwardRef } from 'react'
import classes from './MyInput.module.css'

// 自定义需要的属性，再合并input的通用属性
type MyInputProps = {
    type: string;
    placeholder: string;
    // 可添加其他自定义属性
} & React.InputHTMLAttributes<HTMLInputElement>

const MyInput = forwardRef<HTMLInputElement, MyInputProps>((props, ref) => {
    return (
        <input ref={ref} className={classes.myInput} {...props} />
    );
});

export default MyInput;

纯JSX文件的处理方式（不推荐） #

如果不想转TSX，可以用JSDoc注释给组件添加类型提示：

import React, { forwardRef } from 'react'
import classes from './MyInput.module.css'

/**
 * @typedef {Object} MyInputProps
 * @property {string} type
 * @property {string} placeholder
 * @property {import('react').InputHTMLAttributes<HTMLInputElement>} [rest]
 */

/**
 * @param {MyInputProps} props
 * @param {import('react').Ref<HTMLInputElement>} ref
 */
const MyInput = forwardRef((props, ref) => {
    return (
        <input ref={ref} className={classes.myInput} {...props} />
    );
});

export default MyInput;

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