繁体   English   中英

Typescript 错误:类型'{ onClick: () => void; }' 不可分配给类型 'IntrinsicAttributes'

Typescript error: Type '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes'

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

我收到以下错误:

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

这是我的代码:

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>
    )
}
1 个回复

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

更新ArrowLeft ,使其接受onClick处理程序。 对于功能组件,我通常使用 function 表达式而不是声明:

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

对此的一些说明:

  • React.FCReact.FunctionComponent的别名。 它告诉 TypeScript ArrowLeft是一个 function 组件。
  • React.FC有一个可选的类型参数来指定功能组件期望的道具的类型(它们将与通常的道具组合)。 React.FC之后的<>提供了一个类型参数,用于描述此功能组件接受的道具 object。
  • onClick?:onClick道具是可选的。
  • React.MouseEventHandler<HTMLElement>表示道具的类型(如果已给出)是 HTML 元素的鼠标事件处理程序。
  • 请注意我如何将onClick处理程序转发到span上,以便在单击span时调用它。

我使用了箭头 function 因为它们比传统功能(稍微)更轻,但是如果您愿意,可以使用传统的 function:

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>
    );
};

...然后 hover 将鼠标悬停在span中的onClick部分上。 我的 IDE(VS 代码)告诉我 onClick 的类型是onClick React.MouseEventHandler<HTMLSpanElement> | undefined React.MouseEventHandler<HTMLSpanElement> | undefined

VS Code IDE 显示 span 的 onClick 的工具提示

| undefined 我在道具中处理的| undefined部分使用? 为了使其成为可选,我将HTMLSpanElement更改为更通用的HTMLElement ,因为使用ArrowLeft的代码不需要知道它使用span ,特别是与divi或其他任何东西相比。

9 打字稿:输入'数字| null' 不可分配给类型 'number'

我有以下代码: 但是,使用 Typescript 编译时出现以下错误 我的条件检查以查看喜欢计数是否为空,如果是,则将其分配给一个数字,但打字稿仍然抱怨它可能为空。 如何正确地将喜欢计数分配给一个数字? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM