React 如何处理或限制 Props 到某些类型，或者要求某些 Props 存在？

React 允许我们在 props 的帮助下将数据从父组件传递到子组件。如果我们想检查道具的类型，我们可以在 PropTypes 的帮助下做到这一点。 Proptypes 帮助我们对 props 执行运行时类型检查，如果检查失败，我们会在浏览器控制台上收到警告。

句法：

import PropTypes from 'prop-types';
ComponentName.propTypes = {
  // type checks
};

如果我们想将 prop 限制为字符串类型，我们可以使用下面提到的语法来实现。

import PropTypes from 'prop-types';
ComponentName.propTypes = {
  name: PropTypes.string
};

如果我们想制作任何数据类型的道具，那么我们可以使用下面提到的语法来完成。

import PropTypes from 'prop-types';
ComponentName.propTypes = {
  name: PropTypes.any.isRequired
};

项目设置：

第 1 步：在命令行中使用以下命令创建一个新的 react 项目。

npx create-react-app name_of_the_project

第 2 步：在该项目的 src 目录中创建一个名为 Info.js 的新文件。

项目结构：按照这些步骤操作后，项目结构应如下所示。

在 app.js 文件中，App 组件只包含 Info 作为子组件。我们将两个 props 传递给 Info 组件，它们的名称是 Number 类型，而 username 是 String 类型。

App.js

import Info from './Info';
  
const App = () => {
  return ;
};
  
export default App;

在 Info.js 文件中，我们创建了接收 props 的 Info 功能组件。使用 Prop 类型，我们应用类型检查，即 name prop 只能是字符串类型，而 username prop 也只能是字符串类型，这是必需的，即，必须将 username prop 传递给 Info 组件，否则我们会收到警告在浏览器控制台中。

Info.js

import PropTypes from 'prop-types';
  
const Info = (props) => {
  return (
    

      
Name: {props.name}
      
Username: {props.username}
    
  );
};
  
Info.propTypes = {
  name: PropTypes.string,
  username: PropTypes.string.isRequired,
};
  
export default Info;

运行应用程序的步骤：要启动应用程序，请在命令行上使用以下命令。

npm start

输出：打开浏览器并转到http://localhost:3000 ，您将看到以下输出。

说明：在 Info.js 文件中，我们借助 PropTypes 将 name 属性限制为字符串类型，但在 App 组件中，我们将数字类型（即 1）作为值传递给 name 属性。这就是为什么我们在浏览器控制台中收到警告说名称的值应该是字符串类型但收到了一个数字。