Question

我是 Typescript 的新手，我很难理解为什么我的代码不起作用。

我正在尝试使用 react 和 typescript 构建轮播图片库，但在尝试使用左右箭头上的“onClick”进行导航时遇到了问题。

我收到以下错误：

<块引用>

类型 '{ onClick: () => void; }' 不能分配给类型 'IntrinsicAttributes'。类型 'onClick' 上不存在属性 'IntrinsicAttributes'。

这是我的代码：

const Carousel = ({ slides }) => {
   
    return (
        <section className="slider">

            <ArrowRight onClick = {nextSlide} /> //The error is here!
            <ArrowLeft onClick = { () => prevSlide() } /> //and here!

            {slides.map((slide, index) => {
                return (
                    <div className="img-slide">
                        <img src={slide.image} />
                        <div className="rolo-slide">
                            {/* <img src={slide.image} onClick={slides.setCurrent(index)} /> */}
                        </div>
                    </div>
                )
            })}
        </section>
    )
}
export default Carousel

这里是 ArrowLeft 和 Right 是什么，它们只是一个跨度，我使用 CSS 制作了箭头。

function ArrowLeft() {
    return (
        <span className="arrow left"></span>
    )
}

Answer 1

您的 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 提供了一个类型参数，描述了这个功能组件接受的 props 对象。
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 中，您都可以从不存在的 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:

我在 props 中处理的 | undefined 部分使用 ? 使其成为可选的，我将 HTMLSpanElement 更改为更通用的 HTMLElement 因为没有使用 ArrowLeft 的代码需要知道它使用了 span，具体来说，与 div 或 i 或其他什么相比。

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

1 个答案: