React TypeScript中的可選布林類型props被認定為非布林類型的問題解析

Question

我遇到了一個奇怪的問題，我確定是遺漏了什麼。

這是我的Box函數/元件

export interface BoxProps extends React.HTMLProps<HTMLDivElement> {
    padding?: boolean
    stretch?: boolean
    flex?: boolean
    column?: boolean
    clickable?: boolean
    gap?: boolean
}

function Box (props: BoxProps) {
    return <div className={clsx(
        'flexbox',
        props.column && 'column',
        props.stretch && 'stretch',
        props.padding && 'padding',
        props.flex && 'flex',
        props.clickable && 'clickable',
        props.gap && 'gap',
        props.className
    )} {...props} />
}

Box.defaultProps = {

    padding: false,
    stretch:  false,
    flex:  false,
    column:  false,
    clickable:  false,
    gap:  false,
}

export default Box

所有的props都是布林值，預設值為false，而且都是可為空的（顯然）

但是我在控制台上仍然收到以下警告：

警告：接收到非布林屬性clickable的false值。

我對每個props都收到了這個警告

我不明白如何創建這樣一個元件：

<Box gap stretch>{children}</Box> 等同于 <Box gap={true} ...

而不會收到這個警告。

我嘗試了很多方法，可能無法告訴你每一個方法。

Answer 1

這是因為 div 元素沒有這些屬性（padding、gap等）。

你應該在程式碼中刪除 {...props} 部分。修改後的程式碼應該是這樣的：

function Box (props: BoxProps) {
    return <div className={clsx(
        'flexbox',
        props.column && 'column',
        props.stretch && 'stretch',
        props.padding && 'padding',
        props.flex && 'flex',
        props.clickable && 'clickable',
        props.gap && 'gap',
        props.className
    )} />
}