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