Analyse des Problems, dass optionale boolesche Typ-Requisiten in React TypeScript als nicht-boolesche Typen erkannt werden

Question

Ich bin auf ein seltsames Problem gestoßen und bin mir sicher, dass mir etwas fehlt.

Dies ist meine Box-Funktion/-Komponente

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

Alle Requisiten sind boolesch, der Standardwert ist falsch und alle können (natürlich) auf Null gesetzt werden

Aber ich erhalte immer noch die folgende Warnung auf der Konsole:

Warnung: Wert einer nicht booleschen Eigenschaft clickable的false erhalten.

Ich bekomme diese Warnung für jede Requisite

Ich verstehe nicht, wie man eine solche Komponente erstellt:

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

ohne diese Warnung zu erhalten.

Ich habe viele Methoden ausprobiert und kann Ihnen möglicherweise nicht jede Methode nennen.

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