收到非布尔属性“loading”的“false”

Question

我已经创建了一个基于Material-UI 的 Button 组件的自定义按钮组件，所以我可以在一个动作挂起时覆盖一个加载圆圈。但是，React 抱怨以下内容：

警告：收到false非布尔属性loading。如果要将其写入 DOM，请改为传递字符串：loading="false" 或 loading={value.toString()}。

这是我的组件的样子。提前致谢！

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

Answer 1

您不应该将自定义道具传递给 Button。

代替

const { disabled, loading } = props

和

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

进而

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