React中向组件传递两个onClick回调参数时TS类型错误的解决方法

你的问题出在组件的props参数定义方式上——React函数组件的props是一个单一的对象参数，而你把onConnect和onDisconnect拆成了两个独立的参数，这就导致TypeScript无法识别第二个参数里的onDisconnect作为组件的props属性。

错误原因拆解 #

你原来的组件定义：

const Test = ({ onConnect }:{ onConnect:any }, { onDisconnect }:{ onDisconnect:any }) => { ... }

这里的第二个参数并不是props，而是React的**上下文（Context）**参数，所以当你调用组件传递onDisconnect时，TypeScript会认为这个属性不在组件声明的props类型（仅包含onConnect: any）中，因此抛出类型错误。

正确的实现方式 #

首先我们先定义清晰的Props类型（避免使用any，让TypeScript发挥类型检查的作用），然后将所有props作为单个对象参数接收：

// 定义组件Props的类型
type TestProps = {
  onConnect: () => void;
  onDisconnect: () => void;
};

// 正确的组件定义：接收单个props对象参数
const Test = ({ onConnect, onDisconnect }: TestProps) => {
  return (
    <div>
      <DrawDiagram />
      <button onClick={onConnect}>Connect</button>
      {/* 顺便修正你原来的笔误：第二个按钮文字应该是Disconnect */}
      <button onClick={onDisconnect}>Disconnect</button>
    </div>
  );
};

// 调用方式保持不变，现在就不会报错了
<Test 
  onConnect={() => sendEvent("CONNECT")} 
  onDisconnect={() => sendEvent("DISCONNECT")} 
/>;

额外优化建议 #

• 永远避免使用any类型：它会屏蔽TypeScript的类型检查，容易埋下潜在bug。明确定义回调函数的类型（比如上面的() => void，如果回调有参数也可以加上，比如(id: string) => void）。
• 保持组件props的单一性：所有需要传递给组件的属性都应该放在同一个props对象里，这是React组件的标准写法。

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