反应默认 Proptypes - Javascript

在React应用中，我们经常需要验证我们传递给组件的属性是否具有正确的类型。在许多情况下，当传递类型错误时，应用程序可能会导致崩溃。为了避免这种情况，React提供了PropTypes，它提供了一种验证组件属性的有效方式。

安装和导入

在开始使用PropTypes之前，我们需要安装它。可以通过以下命令使用npm安装PropTypes：

npm install prop-types

安装完成后，我们需要在组件中导入PropTypes：

import PropTypes from 'prop-types';

使用

在React中使用PropTypes通常是在组件中声明静态propTypes属性。propTypes是一个对象，其中每个键对应于组件的一个属性。值是一个验证属性的函数，如果验证失败，则会弹出警告或抛出错误。

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};

export default MyComponent;

在上述示例中，我们声明了一个名为name的属性，并使用PropTypes.string验证其类型。isRequired意味着这是一个必需的属性，如果未传递，将显示警告。

可用的PropTypes验证

以下是PropTypes支持的一些验证器：

• PropTypes.array: 验证属性是否为数组
• PropTypes.bool: 验证属性是否为布尔值
• PropTypes.func: 验证属性是否为函数
• PropTypes.number: 验证属性是否为数字
• PropTypes.object: 验证属性是否为对象
• PropTypes.string: 验证属性是否为字符串
• PropTypes.symbol: 验证属性是否为符号

除了上述验证器外，PropTypes还支持其他一些验证器。在此处查看完整的支持列表

自定义验证器

PropTypes还支持自定义验证器。自定义验证器是一个函数，它接收两个参数：props和propName。props是组件的所有属性，propName是要验证的属性的名称。自定义验证器应返回一个错误字符串，如果验证成功，则返回null。

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

MyComponent.propTypes = {
  name: function(props, propName, componentName) {
    if (props[propName] !== 'Alice' && props[propName] !== 'Bob') {
      return new Error(`Invalid prop ${propName} supplied to ${componentName}. Expected "Alice" or "Bob".`);
    }
  }
};

export default MyComponent;

在上述示例中，我们定义了一个自定义验证器来验证name属性是否为Alice或Bob。如果属性无效，则返回错误消息。

注意：如果使用PropTypes进行属性验证，则不应在生产中使用。生产代码应始终假定属性是正确的，并在开发模式下进行验证。这可以通过使用React生产模式来做到。

结论

通过使用PropTypes，我们可以轻松地验证我们的React应用程序中的组件属性。PropTypes提供了一种简单且有效的方法来避免类型错误，并确保应用程序的稳定性。在编写组件时，请始终使用PropTypes进行类型检查。