Typescript React 空函数作为 defaultProps答案

【问题标题】：Typescript React empty function as defaultPropsTypescript React 空函数作为 defaultProps
【发布时间】：2018-05-06 10:03:12
【问题描述】：

我有一个带有可选函数参数作为属性（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;

我该怎么做？

【问题讨论】：

能否将IProps的代码添加到您的问题中？
我添加了接口

标签： reactjs typescript typescript-typings typescript2.0

【解决方案1】：

您不能在 javascript 中使用 void 作为返回值。使用 null 作为返回值，而不是 void。

onClick: () => null

【讨论】：

【解决方案2】：

您可以使用以下内容：

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

【讨论】：

【解决方案3】：

我认为使用 lodashes noop 可能是一个不错的选择，因为根据组件在访问道具之前组件将具有的重新渲染次数，它会创建对本质上是一个地方的匿名函数的许多引用您需要的功能的持有人。比如：

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

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

【讨论】：

【解决方案4】：

我经常这样做

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

作为简短的、易于键入的内容，并且只会返回 undefined。

【讨论】：