Analyse du problème selon lequel les accessoires de type booléen facultatifs dans React TypeScript sont reconnus comme des types non booléens

Question

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.

Answer 1

C'est parce que l'élément div n'a pas ces attributs (padding, gap, etc.).

Vous devez supprimer la partie {...props} dans votre code. Le code modifié devrait ressembler à ceci :

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