Question

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

 <span onClick={props.onClick} />

但我有以下错误：＆＃39;预期表达。＆＃39;

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作为返回值。而不是无效，请使用null作为返回值。

onClick: () => null

Answer 2

您可以使用以下内容：

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

Answer 3

我认为使用lodashes noop可能是一个不错的选择，因为在组件可以访问prop之前，取决于组件重新渲染的次数，它将创建许多对匿名函数的引用，而该匿名函数本质上是一个地方所需功能的支架。像这样：

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

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

Answer 4

我经常做

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

作为简短，易于输入的内容，只返回undefined。

Typescript将空函数反映为defaultProps

4 个答案: