reactjs - typescript 错误 : Type '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes'

Question

我是 Typescript 的新手，我很难理解为什么我的代码无法正常工作。

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

我收到以下错误:

Type '{ onClick: () => void; }' is not assignable to type 'IntrinsicAttributes'. Property 'onClick' does not exist on type '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根本不接受任何 Prop ，所以 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有一个可选的类型参数来指定功能组件期望的 Prop 类型(它们将与通常的 Prop 组合)。 <>在 React.FC 之后提供一个类型参数，描述此功能组件接受的 props 对象。
• onClick?:说 onClick Prop 是可选的。
• React.MouseEventHandler<HTMLElement>表示 prop 的类型(如果已给定)是 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 代码)告诉我 onClick 的类型是React.MouseEventHandler<HTMLSpanElement> | undefined :

| undefined我在 Prop 中使用 ? 处理的部分让它成为可选的，我改变了HTMLSpanElement只是更一般的HTMLElement因为不需要使用 ArrowLeft 的代码知道它使用 span ，具体来说，与 div或 i或其他。