J'ai rencontré un problème étrange et je suis sûr qu'il me manque quelque chose.

C'est ma fonction/composant 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

Tous les accessoires sont booléens, la valeur par défaut est fausse et sont tous nullables (évidemment)

Mais je reçois toujours l'avertissement suivant sur la console :

Attention : valeur de propriété non booléenne reçue clickable的false.

Je reçois cet avertissement pour chaque accessoire

Je ne comprends pas comment créer un tel composant :

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

sans recevoir cet avertissement.

J'ai essayé de nombreuses méthodes et je ne pourrai peut-être pas vous expliquer toutes les méthodes.