Question

我已经基于Material-UI's Button component创建了一个自定义按钮组件，因此只要有待执行的操作，我就可以覆盖一个加载圆圈。但是，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}/>

Answer 2

您的问题是您要将所有道具传递到Button组件。从{...props}中删除<Button />并分别声明属性。

查看文档，您会发现loading不是Button组件上的属性，但是扩展运算符...仍会添加它。

<div className="button-container">
      <Button disabled={disabled === true || loading === true} />
      {loading === true && <CircularProgress size={24} className="button-progress" />}
    </div>
  )

此外，作为一个旁注，我建议您使用===身份运算符而不是==相等运算符。参见此帖子Which equals operator (== vs ===) should be used in JavaScript comparisons?

因非布尔属性加载而收到“ false”

2 个答案: