React 中的 Props 验证

1. React 中的 Props 是什么？

props（“属性”的缩写）是一种将数据和事件处理程序从一个组件传递到另一个组件（通常是从父组件到子组件）的机制。

父组件

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

接收 props 的子组件

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. 为什么要验证 Prop？

验证 props 可确保组件接收正确类型的数据，并提供所需的 props。这有助于：

• 防止错误。

• 使组件更加可预测

例如，如果组件需要字符串但收到数字，则可能会导致意外行为。

3. 使用 PropTypes 进行验证

React 提供了一个名为 prop-types 的包，允许您强制执行 prop 验证。如果传递给组件的 props 与预期类型不匹配，React 将在控制台中记录警告。

4. 安装 prop-types 包

如果您正在处理新的 React 项目，您可能需要先安装 prop-types 包：

npm install prop-types

5. 在组件中定义 PropType

您可以通过将 propTypes 对象添加到组件来定义 prop 类型。

import PropTypes from 'prop-types';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

这里：添加 PropTypes 来验证“name”属性
期望“name”是必需的字符串

6. 常见的 PropType

以下是您可以应用的一些常见类型的道具验证：

1。原始类型：

• PropTypes.string - 确保 prop 是字符串。
• PropTypes.number - 确保 prop 是一个数字。
• PropTypes.bool - 确保 prop 是布尔值。
• PropTypes.func - 确保 prop 是一个函数。
• PropTypes.object - 确保 prop 是一个对象。
• PropTypes.array - 确保 prop 是一个数组。
• PropTypes.node - 确保 prop 是任何可渲染的内容（数字、字符串、元素、

2。必需的道具： 使用 .isRequired 强制传递道具：

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

3。特定类型的数组： 您可以验证数组以确保其内容属于特定类型：

MyComponent.propTypes = {
  items: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of strings
};

4。特定形状的物体：

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }).isRequired,
};

5。一组值之一： 您可以强制某个 prop 是多个指定值之一：

MyComponent.propTypes = {
  status: PropTypes.oneOf(['success', 'error', 'loading']).isRequired,
};

6。自定义道具验证：您可以创建自己的自定义验证逻辑：

MyComponent.propTypes = {
  age: function (props, propName, componentName) {
    if (props[propName] < 18) {
      return new Error(
        `${propName} in ${componentName} must be at least 18 years old`
      );
    }
  },
};

7. 验证 Prop 的示例

让我们创建一个需要多种类型 props 的组件并验证它们：

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

8.默认道具

如果未提供 prop，您还可以使用 defaultProps 定义默认 prop。

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

9. 处理无效的 prop 类型

如果 prop 类型不正确，React 将在浏览器控制台中记录警告，但应用程序仍然可以运行。值得注意的是，PropTypes 仅在开发模式下运行（即它们不在生产版本中运行）。

以上是React 中的 Props 验证的详细内容。更多信息请关注PHP中文网其他相关文章！