如何在 React 的 Props上应用验证？

在 React 中，props 的验证通常是通过 PropTypes 库来完成的。PropTypes 是一个独立的库，它提供了在开发模式下检查 props 的类型和形状的功能。它可以在 props 传递给组件之前确保它们符合预期的类型和形状。

下面是一个简单的例子，展示了如何在 React 组件中使用 PropTypes 进行 props 验证：

首先，你需要安装 PropTypes 库。如果你还没有安装，可以使用 npm 或 yarn 来安装：

npm install prop-types
# 或者
yarn add prop-types

然后，在你的组件中导入 PropTypes 并使用它来验证 props：

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

function MyComponent({ name, age }) {
  return (
    <div>
      <h1>Name: {name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

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

export default MyComponent;

在这个例子中，我们定义了一个名为 MyComponent 的函数组件，它接受两个 props：name 和 age。我们使用 PropTypes.string.isRequired 和 PropTypes.number.isRequired 来验证这些 props 的类型和必要性。

当 props 不符合预期的类型和形状时，PropTypes 会在控制台中显示警告。这有助于在开发过程中发现潜在的问题。

需要注意的是，PropTypes 只在开发模式下运行，它不会影响生产环境下的代码。因此，你可以放心地在生产环境中使用 PropTypes，而不会对性能产生任何影响。

此外，如果你使用的是 TypeScript，你也可以使用 TypeScript 的类型系统来进行 props 验证。TypeScript 提供了更强大的类型检查功能，并且可以在编译阶段就捕获类型错误。