面试题：React中如何进行Props验证类型及其实践场景

使用PropTypes库进行Props验证类型的基本步骤

安装PropTypes：如果项目使用React v15.5及以上版本，需要单独安装prop-types库，命令为npm install prop-types --save 。
导入PropTypes：在需要进行Props验证的组件文件中导入PropTypes，例如：

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

定义PropTypes验证规则：在组件定义下方，通过组件名.propTypes来定义每个Prop的类型验证规则。例如：

const MyComponent = ({ text, count }) => {
  return (
    <div>
      <p>{text}</p>
      <p>{count}</p>
    </div>
  );
};

MyComponent.propTypes = {
  text: PropTypes.string.isRequired,
  count: PropTypes.number
};

这里text被定义为字符串类型且是必填的，count被定义为数字类型。

使用TypeScript进行Props验证类型的基本步骤

配置TypeScript环境：确保项目已初始化TypeScript环境，可通过npm install typescript --save-dev安装TypeScript，并生成tsconfig.json文件（npx tsc --init）。
定义Props类型：在组件文件中，定义一个接口或类型别名来描述Props的类型。例如：

import React from'react';

interface MyProps {
  text: string;
  count?: number;
}

const MyComponent: React.FC<MyProps> = ({ text, count }) => {
  return (
    <div>
      <p>{text}</p>
      <p>{count? count.toString() : ''}</p>
    </div>
  );
};

export default MyComponent;

这里text是字符串类型且必须，count是可选的数字类型。

业务场景举例

表单组件：假设开发一个输入框组件，它接收type（如"text"、"password"等）和value属性。使用Props验证类型可以确保传入的type是合法的字符串，value类型正确，防止因错误类型传入导致的表单功能异常。例如在TypeScript中：

import React from'react';

interface InputProps {
  type: 'text' | 'password' | 'number';
  value: string;
}

const InputComponent: React.FC<InputProps> = ({ type, value }) => {
  return <input type={type} value={value} />;
};

export default InputComponent;

如果传入不合法的type值，TypeScript会在编译阶段报错，提升代码质量和稳定性。 2. 列表渲染组件：开发一个列表组件，接收一个数组items用于渲染列表项，以及一个函数renderItem用于渲染每个列表项。通过Props验证类型，可以确保items是数组类型，renderItem是函数类型。在PropTypes中：

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

const ListComponent = ({ items, renderItem }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
};

ListComponent.propTypes = {
  items: PropTypes.array.isRequired,
  renderItem: PropTypes.func.isRequired
};

export default ListComponent;

这样能避免因传入错误类型的items或renderItem而导致的渲染错误，提高代码的稳定性。

星途面试题库

面试题：React中如何进行Props验证类型及其实践场景

知识考点

面试题答案

使用PropTypes库进行Props验证类型的基本步骤

使用TypeScript进行Props验证类型的基本步骤

业务场景举例