Typescript React 空函数作为 defaultProps

Question

我有一个带有可选函数参数的无状态功能组件属性 (onClick)，我试图将一个空函数定义为默认属性以便能够在我的组件中安全地执行：

 <span onClick={props.onClick} />

但是我有以下错误：'Expression expected.'

interface IProps {
  size?: sizeType;
  onClick?: (e:any) => void;
}
const Foo: React.SFC = (props: IProps) => {
  // ...
};
const defaultProps: IProps = {
   size: 'default',
   onClick: () => void <-- Expression expected.
};
Foo = defaultProps;

我该怎么做？

Answer 1

您不能将 javascript 中的 void 用作 return 值。使用 null 作为 return 值，而不是 void。

onClick: () => null

Answer 2

您可以使用以下内容：

const defaultProps: IProps = {
   size: 'default',
   onClick: () => void(0)
};

Answer 3

我经常

MyComponent.defaultProps = {
  someNoop: f => f
}

作为简短、易于输入的东西，并且只会 return undefined。

Answer 4

我认为使用 lodashes noop 可能是一个不错的选择，因为根据组件在访问 prop 之前重新渲染的次数，它会创建很多对匿名函数的引用，这实际上是您需要的功能的占位符。类似于：

import noop from 'lodash/noop';
MyComponent.defaultProps = {
  myfunc: noop,
};

这是一个小的优化，但也阻止开发人员为每个需要 func 的默认 prop 声明创建匿名函数。

Typescript React 空函数作为 defaultProps

Typescript React empty function as defaultProps

typescript

reactjs

typescript-typings

typescript2.0