Analisis masalah bahawa prop jenis boolean pilihan dalam React TypeScript diiktiraf sebagai jenis bukan boolean

Question

Saya menghadapi masalah pelik dan saya pasti saya kehilangan sesuatu.

Ini adalah fungsi/komponen Kotak saya

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

Semua prop adalah boolean, nilai lalai adalah palsu dan semuanya boleh batal (jelas)

Tetapi saya masih mendapat amaran berikut pada konsol:

Amaran: Menerima nilai clickable的false sifat bukan boolean.

Saya mendapat amaran ini untuk setiap prop

Saya tidak faham cara mencipta komponen sedemikian:

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

tanpa menerima amaran ini.

Saya telah mencuba banyak kaedah dan mungkin tidak dapat memberitahu anda setiap kaedah.

Answer 1

Ini kerana elemen div tidak mempunyai atribut ini (padding, gap, dll.).

Anda harus mengalih keluar bahagian {...props} dalam kod anda. Kod yang diubah suai sepatutnya kelihatan seperti ini:

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