道具类型在React应用程序中不起作用

Question

我正在尝试在我的react-redux应用程序中使用proptypes，但是它不起作用，或者我做错了什么。这是代码示例的结尾：

LoginPage.propTypes = {
     login_form: PropTypes.string
};

function mapStateToProps(state) {
     return { loginPage: state.loginPage }
 }

export default connect(mapStateToProps)(LoginPage);

login_form是布尔值，我故意写了PropType.string来查看它是否正常工作，但是它没有给我任何错误，这可能是由于redux connect，但我无法进行任何搜索。请任何人告诉我我在做什么错：/谢谢。

Answer 1

来自docs：

  

为prop提供无效值时，JavaScript控制台中将显示警告。出于性能原因，仅在开发模式下检查propTypes。

如果您正在运行的项目不在开发模式下，则看不到警告。

请参阅下面的更新：此外，PropTypes不会引发错误，但会显示警告。确保在控制台中检查警告。您可能选择仅显示错误。

此外，请确保从“ prop-types”导入PropType以与PropTypes一起使用：

import PropTypes from 'prop-types'

---

如果可以确定上述情况，但您仍未在控制台中看到警告，则很可能在字符串中传递了布尔值：

<LoginPage login_form="true" />

或者，

<LoginPage login_form={'true'} />

确保像这样传递布尔值：

<LoginPage login_form={true} />

注意：如果您想传递真实值，则可以仅传递以下道具：

<LoginPage login_form />

现在，拥有login_form: PropTypes.string会向您显示警告。

---

更新：

尽管react doc表示会抛出警告，但我只是验证了它实际上在没有应用程序保持的情况下抛出了错误。但是消息以Warning:开头。因此，请确保在控制台中检查错误而不是警告。

或者，您可以确保检查default。

Answer 2

React将自动检查您在组件上设置的propType，并在控制台中显示[警告]。 但是，如果您在不使用React的情况下使用PropType，则可以手动调用PropTypes.checkPropTypes。

const myPropTypes = {
  login_form: PropTypes.string,
  // ... define your prop validations
};

const props = {
  login_form: true, // not valid
};

PropTypes.checkPropTypes(myPropTypes, props, 'prop', 'LoginPage');

Answer 3

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

class Person extends Component {
    render(){
        console.log('person.js-rendering- child components');
        return (
            <div classes="person">
                <p onClick={this.props.personClick}>I am {this.props.name} and I am  {this.props.age} years old</p>
                <p>{this.props.children}</p>
                <input type="text" onChange={ this.props.personChange } id='inputName' value={ this.props.name } />
            </div>
        )
    }

}
Person.propTypes={
    personClick:PropTypes.func,
    children:PropTypes.func,
    personChange:PropTypes.func,
    name:PropTypes.string,
    age:PropTypes.number
}
export default Person;