在React+Typescript中如何将onClick函数作为props传递给子组件？

接口类型填写方案 #

你当前场景下的onClick是无参数、无返回值的函数，直接把类型定义为() => void即可：

export interface ChildComponentProps {
   onClick: () => void;
}

符合TS规范的可选优化点 #

• 如果后续需要接收点击事件对象作为参数，可以使用React内置的事件类型，适配原生按钮的点击场景：

  export interface ChildComponentProps {
    onClick: React.MouseEventHandler<HTMLButtonElement>;
  }
  

  如果你没有用到事件对象的属性，用() => void的兼容性更强，父组件传递任意无返回值的点击处理函数都不会报错。
• 如果子组件内不需要在触发父组件传入的onClick前执行额外逻辑，可以直接透传函数，不需要额外包裹一层箭头函数，写法更简洁：

  <ButtonComponent 
    onClick={onClick}
    ...
  />
  

• 如果onClick属于可选传递的属性，可以在属性名后加?标记为可选，避免父组件不传时报错：

  export interface ChildComponentProps {
    onClick?: () => void;
  }
  

  可选属性调用时建议加可选链判断：onClick?.()，避免函数未定义时报运行时错误。

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