将一个空函数传递给React组件

Question

I have a React component; for example:

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，但在使用组件时却不能。

- user10780967

---

() => {}？() => void是一个空函数的类型，因此它在接口中使用，而不是实际的函数定义。 - jonrsharpe

Answer 1

() => void 是 TypeScript 中的一种类型（实际上在 JavaScript 中是语法错误）。你应该尝试使用 () => void 0，它是一个返回 undefined 的函数。

<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

- Titian Cernicova-Dragomir

Answer 2

void是JavaScript中的一个运算符，必须跟在表达式后面。因此，() => void不是有效的回调函数定义。无操作函数的形式如下：() => {}或() => undefined，可以在jsx中使用，如下所示：

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

但我更愿意将`onMouseClick`变成可选的，这对组件的使用者来说更加方便和明显。

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

- Yozi

Answer 3

尝试

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

或者

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

- dsych

---

第二种方法使用联合类型： https://www.typescriptlang.org/docs/handbook/advanced-types.html - Excellence Ilesanmi

Answer 4

你可以将其设为可选项

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

也许你想使用默认实现来设置默认属性，这样每次使用时就不必检查 onMouseClick 是否为函数。

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

- r g

Answer 5

我认为这可能在考虑到代码检查工具时有用。

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

- Gonza