时间戳

首页 > 解决方案 > 收到非布尔属性“正在加载”的“假”

javascript - 收到非布尔属性“正在加载”的“假”

问题描述

我已经创建了一个基于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>
    )
}

标签： javascriptreactjstypescript

解决方案

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

代替

const { disabled, loading } = props

和

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

接着

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

推荐阅读