React TypeScript中的可选布尔类型props被认定为非布尔类型的问题解析
P粉035600555
P粉035600555 2024-03-29 12:02:04
0
1
310

我遇到了一个奇怪的问题,我确定是遗漏了什么。

这是我的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,并且都是可为空的(显然)

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

警告:接收到非布尔属性clickablefalse值。

我对每个props都收到了这个警告

我不明白如何创建这样一个组件:

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

而不会收到这个警告。

我尝试了很多方法,可能无法告诉你每一个方法。

P粉035600555
P粉035600555

全部回复(1)
P粉128563140

这是因为 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
    )} />
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板