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} />

但是如果我想传入一个null函数，以便该函数在“鼠标单击”时不起作用，该怎么办；例如：

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

打字稿对我mo吟，说它期待表达。我可以声明一个空函数；像这样：

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

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

Answer 1

尝试

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

或

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

Answer 2

就打字稿而言，

() => 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 3

您可以将其设为可选

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

，也许您想使用默认实现来做默认道具，这样您就不必每次使用onMouseClick时都检查它是否为函数

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

Answer 4

void是JavaScript中的运算符，必须紧随其后的是表达式。因此() => void是无效的回调定义。 Noop函数看起来像这样() => {}，可以像这样在jsx中使用：

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

但是我宁愿将onMouseClick设为可选，这对于组件的使用者而言更加方便和明显

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

Answer 5

我认为考虑到短毛绒可能会有用

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

将空函数传递给React组件

5 个答案: