React-propTypes理解和使用

👉认识

propTypes 是 React 中的一种用于类型检查的机制，用于验证组件的props是否符合预期类型,也就是我们认为的传入的参数类型是否正确。

  最初作为 React 的一部分在 React 0.14 版本中引入的
  
  直到 React 15.5 版本，React 团队将 propTypes 移到一个独立的包中，并且开始鼓励开发者通过安装 prop-types 包来使用它

👉安装使用

🍆使用步骤

1. 安装包 prop-types(yarn add prop-types/ npmi props-types）
2. 导入 prop-types包
3. 使用组件名.propTypes=来给组件的props添加校验规则

上面的部分其实就是我们propTypes的代码和写法：

// 完整写法
import PropTypes from 'prop-types';

const App = ({ colors }) => {
  // 你的组件代码
  return (
    <div>
      {colors.map((color, index) => (
        <p key={index} style={{ color }}>
          {color}
        </p>
      ))}
    </div>
  );
};
App.propTypes = {
  colors: PropTypes.array.isRequired,  // 定义 colors 必须是数组类型并且是必需的
};
export default App;

👉错误提示

我们简单看一下下面的代码错误的时候给我们的错误提示：

// 完整写法
import PropTypes from 'prop-types';

const App = ({ colors }) => {
  // 你的组件代码
  return (
    <div>
      {colors.map((color, index) => (
        <p key={index} style={{ color }}>
          {color}
        </p>
      ))}
    </div>
  );
};
App.propTypes = {
  colors: PropTypes.array.isRequired,  // 定义 colors 必须是数组类型并且是必需的
};
export default App;

错误写法时候给我们的提示

import PropTypes from 'prop-types';
function App(props) {
  return (
    <h1>Hi, {props.colors}</h1>
  );
}

// 定义propTypes
App.propTypes = {
  // 约定colors属性为array类型
  // 如果类型不对，则报出明确错误，便于分析错误原因
  colors: PropTypes.array
};

export default App;

这个时候给我们的提示

👉 常见propTypes约束

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定结构的对象：shape(())

👉写法

// 常见类型

// 可选函数
optionalFunc: PropTypes.func,

// 必选函数
requiredFunc: PropTypes.func.isRequired,

// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

👉完整类型

约束地址

👉案例

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

const App = (props) => {
  return (
    <div>
      <h1>props 校验:</h1>
    </div>
  );
};

// 添加 props 校验
App.propTypes = {
  a: PropTypes.number,  // 属性 a 的类型：数值 (number)
  fn: PropTypes.func.isRequired,  // 属性 fn 的类型：函数 (func) 并且为必填项
  tag: PropTypes.element,  // 属性 tag 的类型：React 元素 (element)
  filter: PropTypes.shape({  // 属性 filter 的类型：对象
    area: PropTypes.string,
    price: PropTypes.number,
  }),
};

ReactDOM.render(<App />, document.getElementById('root'));

👉默认值defaultProps

有时候我们需要一些默认值，当父组件没有传递 props 时，我们使用默认值defaultProps。

场景：分页组件每页显示条数
作用：给props设置默认值，在未传入props时生效

import React from 'react';
import ReactDOM from 'react-dom';

function App(props) {
  return (
    <div>
      此处展示props的默认值：{props.pagesize}
    </div>
  );
}

// 设置默认值
App.defaultProps = {
  pagesize: 10,  // 默认值为 10
};

ReactDOM.render(<App />, document.getElementById('root'));