将空函数传递给 React 组件

Question

我有一个 React 组件；例如：

export class Component1 extends Component<IProps, IState> {

它接受的一个道具是一个函数：

export interface IProps {    
    a: number,
    b: number,
    onMouseClick: () => void
}

所以，当我使用这个组件时，我可以这样做：

<Component1 onMouseClick={() => this.DoStuff()} a={1} b={2} />

但是如果我想传入一个空函数，那么该函数在鼠标单击时什么也不做；例如：

<Component1 onMouseClick={() => void} a={1} b={2} />

Typescript 对我抱怨，说它需要一个表达式。我可以声明一个空函数；像这样：

<Component1 onMouseClick={() => function(){}} a={1} b={2} />

有没有更好的方法来声明一个空函数？我也有点不清楚为什么我可以在 IProps 定义中将属性 onMouseClick 分配为 void，但在使用组件时却不能。

Answer 1

考虑到 linter，我认为这可能很有用

<Component1 onMouseClick={() => void undefined} a={1} b={2} />

Answer 2

void 是 JavaScript 中的运算符，后面必须跟一个表达式。所以() => void 不是有效的回调定义。 Noop 函数看起来像这样 () => {} 并且可以像这样在 jsx 中使用：

<Component1 onMouseClick={() => {}}  a={1} b={2}/>

但我宁愿让 `onMouseClick 可选，它对于组件的使用者来说更方便和明显

interface IProps {    
   a: number,
   b: number,
   onMouseClick?: () => void
}

Answer 3

你可以让它成为可选的

export interface IProps {    
    a: number,
    b: number,
    onMouseClick?: () => void 
}

你可能想用默认实现来做默认道具，这样你就不必在每次使用它时检查 onMouseClick 是否是一个函数

class ... extends React.Component<...>{
 static defaultProps = {
  onMouseClick: () => null,
 }
}

Answer 4

() => void 就打字稿而言是一种类型（实际上是 Javascript 中的语法错误）。你应该试试() => void 0 这是一个返回未定义的函数

<Component1 onMouseClick={() => void 0} a={1} b={2} />

或者，如果您想允许 null 或可选，请更改道具的类型以包含 null，尽管您需要额外检查组件

export interface IProps {    
    a: number,
    b: number,
    onMouseClick?: () => void // ? makes it optional
}
<Component1 a={1} b={2} /> // no error

Answer 5

试试

export interface IProps {    
    a: number,
    b: number,
    onMouseClick?: () => void
}

或

export interface IProps {    
    a: number,
    b: number,
    onMouseClick: () => void | null
}