如何在React中创建无操作空函数以满足onClick传参、lint校验及测试要求

解决方案 #

最简单的写法是直接传入无逻辑的空箭头函数，完全不会触发eslint的no-console规则，也没有多余执行逻辑：

<Button
  title='MyTitle'
  className='my-class-name'
  onClick={() => {}}
/>

其他优化方案 #

• 如果你项目里多个地方都需要用到占位空函数，可以统一抽离公共的空函数常量复用：

// 可放在全局公共常量文件中复用
const noop = () => {}

// 组件内使用
<Button
  title='MyTitle'
  className='my-class-name'
  onClick={noop}
/>

• 如果是TypeScript项目，可以给空函数加上类型适配，避免不同函数类型的校验报错：

const noop = (...args: any[]) => void 0

注意事项 #

不要直接省略onClick属性或者传入undefined作为值，除非组件本身明确声明onClick是可选属性。空函数可以保证无论组件内部有没有做非空判断，调用onClick时都不会抛出未定义的执行错误。

内容的提问来源于stack exchange，提问作者Leo Messi