react中如何对props传的参数进行必要的限制

目录

一：总结

二：实现步骤

2.1 安装需要的库

2.2 对props 进行参数限制

 3.3  俩种属性限制

3.1 设置静态属性

3.2 设置默认属性值

---

一：总结

 1：react中的 props 用于给组件传递属性，对所传递的属性可以作以下三种限制：

1. 数据类型的限制: string number func
2. 必要性的限制: isRequired
3. 指定默认的属性值类: defaultProps
4. 静态属性：static

二：实现步骤

在React中，您可以使用PropTypes库来对props进行类型限制。以下是如何在React组件中使用PropTypes来对props进行限制的示例：

2.1 安装需要的库

首先，确保您已经安装了prop-types库：

npm install prop-types

2.2 对props 进行参数限制

 然后，您可以在组件中导入PropTypes并定义props的类型和必要性。例如：

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

class MyComponent extends React.Component {
  render() {
    // 使用this.props中的属性
    return (
      <div>
        <h1>{this.props.title}</h1>
      </div>
    );
  }

  //第二种
  static propTypes  = {
        title: PropTypes.string.isRequired, // 使用isRequired来指定title属性是必须的
  };
}

//第一种
MyComponent.propTypes = {
  title: PropTypes.string.isRequired, // 使用isRequired来指定title属性是必须的
};

export default MyComponent;

在这个示例中，我们使用PropTypes来定义title属性的类型为字符串，并且使用isRequired来指定title属性是必须的。如果在使用组件时未传递title属性，将会产生警告。

---

 3.3  俩种属性限制

在React中，您可以为组件设置静态属性（静态属性是与类关联而不是实例的属性），以及为属性设置默认值。

3.1 设置静态属性

静态属性通常用于存储组件相关的元信息或共享数据。您可以在类组件中直接声明静态属性。以下是一个示例：

class MyComponent extends React.Component {
  static myStaticProperty = 'This is a static property';
  
  render() {
    return <div>{MyComponent.myStaticProperty}</div>;
  }
}

在这个示例中，myStaticProperty是MyComponent类的静态属性，您可以通过类名访问它。

3.2 设置默认属性值

您可以使用defaultProps来为组件的属性设置默认值。这是一个在类组件中使用的方法。以下是一个示例：

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.myProp}</div>;
  }
  //第一种
  static defaultProps = {
        title: PropTypes.string.isRequired, // 使用isRequired来指定title属性是必须的
  };
}
//第二种

MyComponent.defaultProps = {
  myProp: 'Default Value for myProp',
};

在这个示例中，如果未向MyComponent组件传递myProp属性，它将使用默认值"Default Value for myProp"。