Maison > Questions et réponses > le corps du texte
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.
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 )} /> }