React+TypeScript通用Button组件类型兼容问题求解

错误原因分析 #

1. 类型不匹配：你的Button组件直接将泛型固定为Event | string，导致所有Button实例的onClickHandler必须接受string | Event类型参数，但EditorText中的onSubmit仅接受string类型，无法处理Event参数，触发类型错误。
2. 逻辑参数错误：直接将onSubmit绑定到Button的点击事件，会导致点击时传递的是Event对象而非编辑器的内容字符串，不符合onSubmit的参数要求。

修复步骤 #

1. 重构Button组件为泛型组件 #

让Button组件的回调参数类型由调用者指定，而非内部固定：

import { ButtonContainer } from "./button.styles";

// 泛型接口，默认参数类型为Event
interface IButton<T = Event> {
  onClickHandler: (arg: T) => void;
  label: string;
}

// 定义泛型组件，支持自定义回调参数类型
const Button = <T,>({ label, onClickHandler, ...otherProps }: IButton<T>) => {
  return (
    <ButtonContainer
      {...otherProps}
      onClick={(e) => {
        // 将点击事件对象传递给回调，若需自定义参数，由调用者封装函数处理
        onClickHandler(e as unknown as T);
      }}
    >
      {label}
    </ButtonContainer>
  );
};

export default Button;

2. 修改EditorText组件的按钮点击逻辑 #

封装点击事件函数，传递编辑器内容给onSubmit，同时适配Button的类型要求：

// 替换原按钮代码
<div>
  {/* 封装函数，传递编辑器内容给onSubmit */}
  <Button onClickHandler={() => onSubmit(content)} label="Save" />
  {/* 封装函数，调用无参数的onCancel */}
  <Button onClickHandler={() => onCancel()} label="Cancel" />
</div>

3. 保留Event参数的使用场景 #

如果在其他组件中需要使用Event参数（比如调用e.preventDefault()），直接正常绑定即可，TypeScript会自动推断类型：

<Button onClickHandler={(e) => {
  e.preventDefault();
  // 其他业务逻辑
}} label="Submit" />

效果验证 #

修改后：

• Save按钮点击时会正确传递编辑器的内容字符串给onSubmit，类型完全匹配。
• Cancel按钮正常触发无参数的onCancel。
• 其他需要使用Event参数的场景依然保留原有功能，类型检查通过。

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