reactjs - 分配此 onClick 功能的正确方法？

Question

我有一些下游代码将名为 OnClick 的对象属性设置为函数。TypeScript 中的 OnClick 属性定义为 Function | 不明确的。我正在尝试像这样绑定到组件中的 OnClick 道具：

onClick={x.OnClick}

但是 TypeScript 编译器不喜欢 x.OnClick 可能未定义的事实。所以我尝试绑定到这样的本地空函数：

onClick={x.OnClick || this.doNothing}

但这会返回以下内容：

TS2322 (TS) 类型 'Function' 不可分配给类型 '(event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void'。类型 'Function' 不匹配签名 '(event: MouseEvent<HTMLAnchorElement, MouseEvent>): void'

知道如何更新我的代码来处理这种情况吗？

标签： reactjstypescript

Answer 1

我猜你的函数this.doNothing看起来像这样

const doNothing = () => {}

Typescript 抱怨，因为它期望函数具有事件类型的参数。将事件属性传递给函数以绕过此类要求

const doNothing = (event: MouseEvent) => {}

Typescript 可能会抱怨该函数是空的。