reactjs - Typescript 錯誤：型別 '{ onClick:() => void; }' 無法指派給型別 'IntrinsicAttributes'

我對 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，它們只是一個 span，我是用 CSS 製作箭頭的。

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

答案＃1

你的 ArrowLeft 完全不接受任何 props，因此 TypeScript 不會允許你給它分配一個它不接受的 onClick prop。

更新 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 有一個可選的類型參數，用於指定函數式組件期望的 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（或者對於 class 組件來說是 React.Component），但例如上面的 onClick，你不必神奇地去記住它。在任何不錯的 IDE 中，你可以一開始不寫它，然後這樣做：

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

...然後將你的滑鼠懸停在 span 中的 onClick 部分。我的 IDE（VS Code）告訴我 onClick 的類型是 React.MouseEventHandler<HTMLSpanElement> | undefined：

我在 props 裡處理了 | undefined 部分，使用 ? 使其變為可選，並且我將 HTMLSpanElement 改為更一般的 HTMLElement，因為使用 ArrowLeft 的程式碼沒有必要特別知道它使用的是 span 而不是 div 或 i 或其他元素。