Maison  >  Questions et réponses  >  le corps du texte

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

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 clickablefalse.

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.

P粉035600555P粉035600555226 Il y a quelques jours287

répondre à tous(1)je répondrai

  • P粉128563140

    P粉1285631402024-03-30 11:07:26

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

    répondre
    0
  • Annulerrépondre