Typescript React 空函数作为 defaultProps

Posted 2023-03-13

【中文标题】Typescript React 空函数作为 defaultProps

【英文标题】：Typescript React empty function as 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的代码添加到您的问题中？

我添加了接口

【参考方案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。