React - 收到非布尔属性的“false”'attrName'

Question

我有自己的可重用 Button 组件，代码如下：

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Button extends Component {
    render() {
        const {href, border, children, className} = this.props;
        let baseClass = 'button';
        border && (baseClass += ' button-border');
        className && (baseClass += ' ' + className);
        return (
            href ? (
                    <a className={baseClass} {...this.props}><span>{children}</span></a>
                ) :
                (
                    <button {...this.props} className={baseClass}><span>{children}</span></button>
                )
        )
    }
}

Button.propTypes = {
    href: PropTypes.string,
    border: PropTypes.bool,
    className: PropTypes.string
}

Button.defaultProps = {
    border: false,
    className: ''
}

export default Button;

然后我在没有 border 属性的其他组件中调用它，因为我通常只将它用于辅助类型的操作调用（请记住，代码被简化只是为了说明问题，所以传递一个额外的className 为了避免警告不是一个可行的解决方案）。

我使用以下代码调用按钮：

<Button>Continue</Button>

如您所见，没有指定边框属性，因此组件从 defaultProps 接收到正确的值：false。

不幸的是，在运行我的申请之后，我遇到了以下警告： react-dom.development.js:506 警告：收到 false 非布尔属性 border.

我已经阅读了多个具有类似问题的其他问题，但其中 none 很有帮助。

在我的实现中我也尝试修改了

border && (baseClass += ' button-border');

到

border ? (baseClass += ' button-border') : '';

但没有解决任何问题。

我还在组件渲染之前将 Button.propTypes 移动到静态 propTypes - 没有任何结果。

就软件包而言，我使用的是： - 反应 16.8.2 - 道具类型 15.7.2

感谢您提供这方面的线索。

Answer 1

组件本身的定义没有任何问题（即 defaultProps 和 <Button /> 上的 propTypes），但是这是由于以下代码导致的，它传递给<a/> 和 <button/>。

{...this.props}

通过这样做，我们将 border={false} 传递给本机锚点和按钮元素，这似乎不受支持，或者至少会引发 React 的错误。如果删除这些行，您会注意到错误消失了；明确地将您想要的道具传递给这些标签可能是值得的。

React - 收到非布尔属性的“false”'attrName'

React - Received `false` for a non-boolean attribute 'attrName'

reactjs

react-proptypes