允许 null 在带有 Typescript 的内置 JSX 属性中？

Question

我做了很多：

<button onClick={disabled ? null : cb}>

或者：

function Button({ style = null }) {
  return <button style={style} />;
}

但是，我会得到：

Type '(() => void) | null' is not assignable to type '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined'.
  Type 'null' is not assignable to type '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined'.

供参考，来自@types/react ：

interface DOMAttributes<T> {
  onClick?: MouseEventHandler<T>;
}

我可以通过执行以下操作来修复此错误：

<button onClick={disabled ? undefined : cb}>

然而，传统上，我们避免使用undefined 。 在这种情况下，有没有办法让 TS 接受null ？ 或者更一般地说，如果我可以让 TS 考虑null和undefined是相同的值，那将有很大帮助。 我的代码对两者没有区别。

我尝试禁用strictNullChecks ，但没有奏效。

Answer 1

在这种情况下，有没有办法让 TS 接受 null

除非更改类型定义，否则我不建议这样做。

解决方案

只需使用undefined 。 同时使用null和undefined是使用 JavaScript 的必然性，尤其是在使用您不是所有者的生态系统包时（如 react）。