打字稿错误：输入 '{ onClick: () => void; }' 不可分配给类型 'IntrinsicAttributes'

您ArrowLeft根本不接受任何道具，因此 TypeScript 不会让您为其分配onClick不接受的道具。

更新ArrowLeft以接受onClick处理程序。对于函数式组件，我通常使用函数表达式而不是声明：

const ArrowLeft: React.FC<{onClick?: React.MouseEventHandler<HTMLElement>}> = ({onClick}) => {
    return (
        <span className="arrow left" onClick={onClick}></span>
    );
};

一些注意事项：

• React.FC是 的别名React.FunctionComponent。它告诉 TypeScript 这ArrowLeft是一个函数组件。
• React.FC有一个可选的 type 参数来指定功能组件期望的 props 的类型（它们将与通常的 props 组合）。在<>后React.FC提供了一种类型参数描述所述对象的道具这种功能部件接受。
• onClick?:说onClick道具是可选的。
• React.MouseEventHandler<HTMLElement> 表示道具的类型（如果给定）是 HTML 元素的鼠标事件处理程序。
• 请注意我如何将onClick处理程序转发到 ，span以便在span单击时调用它。

我使用了箭头函数，因为它们比传统函数（略）轻，但如果您愿意，也可以使用传统函数：

const ArrowLeft: React.FC<{onClick?: React.MouseEventHandler<HTMLElement>}> = function({onClick}) {
    return (
        <span className="arrow left" onClick={onClick}></span>
    );
};

顺便说一句：不要担心记住所有这些类型。你会想知道的React.FC当然是（或React.Component用于class组件），但例如在onClick上面你没有神奇地知道这一点。在任何像样的 IDE 中，您都可以从不存在的那个开始，然后执行以下操作：

// To start with
const ArrowLeft: React.FC = () => {
    return (
        <span className="arrow left" onClick={}></span>
    );
};

...然后将鼠标悬停onClick在span. 我的 IDE (VS Code) 告诉我类型onClick是React.MouseEventHandler<HTMLSpanElement> | undefined：

该| undefined部分我在道具处理的使用?，使其可选的，我改变HTMLSpanElement，只是更普遍的HTMLElement，因为没有任何需要使用的代码ArrowLeft就知道它使用一个span，具体而言，与一个div或i或什么的。