Question

我已阅读PropTypes的the official documentation和the npm package description。

但是，当我运行此代码时，

const propTypes = {
    foo: PropTypes.string.isRequired,
    bar: PropTypes.number.isRequired,
    umu: PropTypes.string
};

const defaultProps = {
    umu: "default value"
};

class MyComp extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
        <ul>
            <li>foo is {this.props.foo}</li>
            <li>bar is {this.props.bar}</li>
            <li>umu is {this.props.umu}</li>
        </ul>
        );
    }
}
MyComp.propTypes = propTypes;
MyComp.defaultProps = defaultProps;

class MyWrapper extends React.Component{
    render() {
        return (
            <div>
                <MyComp bar="string and not a number"/>
            </div>
        );
    }
}

ReactDOM.render(React.createElement(MyWrapper, null, null), document.getElementById("app"));

虽然未设置必需的属性propTypes且属性foo不是数字，但未检查我的bar。谁能告诉我我做错了什么？这是相应的CodePen。

提前多多感谢。

Answer 1

即使验证失败，组件也会呈现，这对开发人员来说更是一个警告，所以你会在控制台上看到错误。 CodePen没有显示这些警告，但是，可能是因为您正在使用反应的生产版本？无论哪种方式，这都是正确的行为。

为什么React没有检查我的propTypes？

1 个答案: