javascript - Mottog `false` för ett icke-booleskt attribut `loading`

Jag har skapat en anpassad knappkomponent baserad på Material-UIs Button-komponent, så att jag kan lägga över en laddningscirkel när en åtgärd väntar. Men React klagar med följande:

Varning: Mottog false för ett attribut som inte är boolean loading. Om du vill skriva det till DOM, skicka en sträng istället: loading="false" eller loading={value.toString()}.

Här är hur min komponent ser ut. Tack på förhand!

import * as React from 'react'
import { ButtonProps } from '@material-ui/core/Button'
import { Button, CircularProgress } from '@material-ui/core'

interface IProps extends ButtonProps {
    loading: boolean
}

export const LoadingButton = (props: IProps) => {
    const { disabled, loading } = props
    return (
        <div className='button-container'>
            <Button {...props} disabled={disabled == true || loading == true}/>
            {loading == true && (
                <CircularProgress size={24} className='button-progress' />
            )}
        </div>
    )
}

Svar #1

Du borde inte skicka dina anpassade egenskaper vidare till knappen.

Ersätt

const { disabled, loading } = props

med

const { disabled, loading, ...rest } = props

och sedan

<Button {...rest} disabled={disabled || loading}/>

Relaterade artiklar