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。

我已经阅读了多个其他类似问题，但都没有帮助。

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

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

到

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

但是它什么也没解决。

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

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

感谢任何潜在客户。

Answer 1

组件本身的定义（即defaultProps上的propTypes和<Button />）的定义没有错，但这是由于以下代码同时传递给了{ {1}}和<a/>。

<button/>

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

反应-为非布尔属性'attrName'收到的'false'

1 个答案: