使用 onClick 和 TypeScript 反应功能性 <a> 组件答案

【问题标题】：React functional <a> component with onClick and TypeScript使用 onClick 和 TypeScript 反应功能性 <a> 组件
【发布时间】：2020-05-29 11:10:06
【问题描述】：

我正在用 TypeScript 编写一个反应组件：

interface Props {
  children: React.ReactNode;
  href: string;
  onClick?: (e: any) => void;
}

const Input: React.FC<Props> = ({ children, href, onClick }) => (
  <a className="A" href={href} onClick={onclick(e)}>
    {children}
  </a>
);

export default Input;

但我收到以下错误：

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Window'.ts(2684)

我不确定我做错了什么，欢迎任何帮助！

【问题讨论】：

标签： javascript reactjs typescript react-functional-component

【解决方案1】：

不要调用onClick()，只需将引用作为prop传递

const Input: React.FC<Props> = ({ children, href, onClick }) => (
  <a className="A" href={href} onClick={onClick}>
    {children}
  </a>
);

【讨论】：