我遇到了一个奇怪的问题,我确定是遗漏了什么。
这是我的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} ...
而不会收到这个警告。
我尝试了很多方法,可能无法告诉你每一个方法。
这是因为 div 元素没有这些属性(padding、gap等)。
你应该在代码中删除 {...props} 部分。修改后的代码应该是这样的: