React高阶组件TypeScript类型错误求助：默认className注入问题

问题原因 #

你的代码里泛型约束T extends JSX.IntrinsicAttributes太宽泛，TypeScript无法保证你合并后的className和剩余props能匹配T的结构——比如T可能定义了必填的className，或者className是其他非字符串类型，这就导致类型校验失败。

修正方案 #

下面两种写法都能解决这个问题，核心是明确泛型的props结构，确保合并后的props符合目标组件的类型要求：

方案一：约束泛型包含可选className

import React from 'react';

/**
 * Returns a component that will have a default set of classnames
 */
function withDefaultClasses<T extends { className?: string }>(
  Component: React.FC<T>,
  defaultClassNames: string,
) {
  return function withClasses(props: Omit<T, 'className'> & { className?: string }) {
    const { className, ...rest } = props;
    const combinedClassName = className 
      ? `${defaultClassNames} ${className}` 
      : defaultClassNames;
    
    // 类型断言确保TS认可合并后的className符合T的要求
    return <Component 
      {...rest as Omit<T, 'className'>} 
      className={combinedClassName as T['className']} 
    />;
  };
}

方案二：显式定义组件props的合并类型

import React from 'react';

/**
 * Returns a component that will have a default set of classnames
 */
function withDefaultClasses<T>(
  Component: React.FC<T & { className?: string }>,
  defaultClassNames: string,
) {
  // 允许用户传入可选的className，同时保留T的其他props
  type Props = Omit<T, 'className'> & { className?: string };

  return function withClasses(props: Props) {
    const { className, ...rest } = props;
    const combinedClassName = className 
      ? `${defaultClassNames} ${className}` 
      : defaultClassNames;

    return <Component {...rest} className={combinedClassName} />;
  };
}

为什么这样有效 #

• 方案一通过T extends { className?: string }约束泛型，确保T的className要么是可选字符串，要么不存在，这样合并后的字符串类型className能安全匹配。
• 方案二直接把目标组件的props定义为T & { className?: string }，让TS明确知道组件接受额外的可选className，传递合并后的props时自然不会有类型冲突。

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