Warning: Received `false` for a non-boolean attribute `xxx`.

Question

在react将组件属性设置了布尔类型后，就弹出了这条错误，虽然程序能正常运行，但在控制台中出现红色错误始终不能接受！

Warning: Received `false` for a non-boolean attribute `fullWidth`.

我使用的是typescript，下面是代码片断。

interface Props extends xxx {
    fullWidth?: boolean
}

const Component:React.FC<Props> = ({fullWidth, children, ...rest}) => {
    <div className={fullWidth ? 'full-width' : ''} {...rest}>
        {children}
    </div>
}


//====================


function App() {
    <Component fullWidth={false}>component</Component>
}

我知道可以把布尔类型改为<0 | 1>

 - fullWidth?: boolean
 + fullWidth?: <0 | 1> 

在js中可以直接使用，但在ts中组件内要判断它的值fullWidth == 1 ? 'full-width' : ''。
使用这个组件还要改为fullWidth={0}。

作为一个有追求的人，我想保留原有的数据类型boolean而不使用<0 | 1>或者<'true' | 'false'>，有没有解决的方法？

Answer 1

0 | 1 | boolean ?