React - 为非布尔属性'attrName'收到`false`

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;

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

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

<Button>Continue</Button>

如您所见，没有指定border prop，因此组件从defaultProps：false接收正确的值。

不幸的是，在运行我的应用程序后，我遇到以下警告：react-dom.development.js：506警告：收到false的非布尔属性border。

我已经阅读了类似问题的其他多个问题，但没有一个是有用的。

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

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

至

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

但它没有解决任何问题。

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

在包装方面，我正在使用： - 反应16.8.2 - 道具类型15.7.2

感谢您的任何线索。

Answer 1

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

{...this.props}

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