React+TypeScript中使用字符串作为组件名的类型问题求解

你遇到的问题核心是用字符串作为动态组件的类型在TS里不被允许——TS需要明确组件是原生HTML标签还是React组件，而string类型无法区分这两者，同时ref的类型也没考虑到不同组件的差异。下面是具体的修复步骤：

1. 修正Component的类型定义 #

把Props里的Component: string改成Component?: React.ElementType，这个类型是TS专门用来兼容原生标签名（比如'input'、'textarea'）和自定义React组件的通用类型，完美适配你的需求。

2. 调整ref的类型 #

原来的useRef<HTMLInputElement>只适配原生input，但如果Component是textarea或者第三方组件（比如ReactTextareaAutosize），ref的类型就会不匹配。改成React.RefObject<HTMLElement>，因为input、textarea都是HTMLElement的子类，第三方组件如果基于原生表单元素封装，ref也会指向HTMLElement。

3. 处理可选属性的默认值 #

把Props里的可选属性（比如type、className、Component）加上?标记，因为你已经给了默认值，不需要强制传入。

修改后的完整代码 #

import React, { useEffect, useRef } from 'react'
import './AppInput.css'

interface Props {
    placeholder: string;
    value: string | number;
    setValue: React.Dispatch<React.SetStateAction<string>>;
    text: string;
    shouldFocusOnKey: boolean;
    type?: string;
    name?: string;
    className?: string;
    Component?: React.ElementType;
}

export const AppInput: React.FC<Props> = (props) => {
    const { 
        placeholder, 
        value, 
        setValue, 
        text, 
        shouldFocusOnKey, 
        type = 'text', 
        name, 
        className = '', 
        Component = 'input' 
    } = props;
    const inputRef = useRef<HTMLElement>(null);

    useEffect(() => {
        if (shouldFocusOnKey) {
            const handleKeyDown = (e: KeyboardEvent) => {
                if (e.ctrlKey && e.key === 'm') {
                     inputRef.current?.focus();
                }
            };
            window.addEventListener('keydown', handleKeyDown);
            // 清理事件监听，避免内存泄漏和全局事件冲突
            return () => window.removeEventListener('keydown', handleKeyDown);
        }
    }, [shouldFocusOnKey]);

    return (
        <div className={`appinput ${className}`}>
            <span>{text}</span>
            <div className="flexcol">
                <Component 
                    ref={inputRef} 
                    placeholder={placeholder} 
                    value={value} 
                    onChange={(e) => { 
                        setValue(e.target.value)
                    }} 
                    type={type} 
                    name={name} 
                />
            </div>
        </div>
    )
}

额外优化点 #

• 把原来的window.onkeydown改成addEventListener并添加清理函数，避免覆盖全局键盘事件和内存泄漏。
• 给className设置默认空字符串，防止拼接后出现多余空格。

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