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

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

React 会自动检查你在组件上设置的 propTypes 并在控制台中显示 [warning]。但是如果你在没有 React 的情况下使用 PropTypes 那么你可以手动调用 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 2

来自docs：

When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, propTypes is only checked in development mode.

如果您是运行未处于开发模式的项目，则看不到警告。

请参阅下面的更新：~~此外，PropTypes 不会抛出错误但会显示警告。请务必检查控制台中的警告。您可能选择了仅显示错误。~~

此外，请务必从 'prop-types' 导入 PropTypes 以使用 PropTypes：

import PropTypes from 'prop-types'

如果上述事情是肯定的，但您仍然没有在控制台中看到警告，那么有一种可能是您在字符串中传递了布尔值：

<LoginPage login_form="true" />

或者，

<LoginPage login_form={'true'} />

一定要像这样传递布尔值：

<LoginPage login_form={true} />

注意：如果要传真值，可以这样传props：

<LoginPage login_form />

现在，login_form: PropTypes.string 会显示警告。

更新：

虽然 React 文档说它会抛出警告，但我只是验证它实际上在没有应用程序保留的情况下抛出错误。但消息以 Warning: 开头。因此，一定要检查控制台中的 error not warning.

或者，您可能一定要检查 default。

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;

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

prop types not working in react application

reactjs

redux

react-proptypes