Analisis masalah bahawa prop jenis boolean pilihan dalam React TypeScript diiktiraf sebagai jenis bukan boolean
P粉035600555
P粉035600555 2024-03-29 12:02:04
0
1
293

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

P粉035600555
P粉035600555

membalas semua(1)
P粉128563140

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
    )} />
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan