面试题：React Props验证类型与组件复用性的关联

使用类型检查库

JavaScript 中使用 PropTypes（适用于 React）：

首先安装 prop - types 库：npm install prop - types。

对于简单数据类型，如字符串、数字、布尔值，可以这样验证：

import PropTypes from 'prop - types';

const TableComponent = ({ tableTitle, rowCount, isEditable }) => {
  // 组件逻辑
};

TableComponent.propTypes = {
  tableTitle: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired,
  isEditable: PropTypes.bool
};

对于复杂嵌套数据结构，例如数组嵌套对象。假设表格数据是一个包含对象的数组，每个对象有特定的属性：

const tableDataPropType = PropTypes.arrayOf(
  PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    // 其他属性
  })
);

TableComponent.propTypes = {
  tableData: tableDataPropType.isRequired
};

TypeScript（适用于多种框架）：

定义接口或类型别名来描述Props。对于简单数据类型：

interface TableProps {
  tableTitle: string;
  rowCount: number;
  isEditable?: boolean;
}

const TableComponent: React.FC<TableProps> = ({ tableTitle, rowCount, isEditable }) => {
  // 组件逻辑
};

对于复杂嵌套数据结构，例如多层嵌套的对象数组。假设表格数据是一个包含对象的数组，每个对象又包含一个子对象数组：

interface InnerObject {
  subProp1: string;
  subProp2: number;
}

interface TableDataObject {
  id: number;
  name: string;
  innerArray: InnerObject[];
}

interface TableProps {
  tableData: TableDataObject[];
}

const TableComponent: React.FC<TableProps> = ({ tableData }) => {
  // 组件逻辑
};

默认值设置
- JavaScript 中使用 PropTypes：
  - 可以为Props设置默认值，这样在没有传递Props时也能保证组件正常工作。例如：
```
TableComponent.defaultProps = {
  isEditable: false
};
```
- TypeScript：
  - 在函数式组件中，可以直接在参数中设置默认值：
```
const TableComponent: React.FC<TableProps> = ({ tableTitle, rowCount, isEditable = false }) => {
  // 组件逻辑
};
```
保持简洁性和可维护性
- 模块化验证：对于复杂Props，将验证逻辑拆分成多个小的验证单元。比如在处理复杂表格数据结构时，先定义每个子部分的验证类型，再组合成整体的验证类型，这样便于理解和维护。
- 文档化：无论是使用 PropTypes 还是 TypeScript，都要对Props进行清晰的文档说明。在 JavaScript 中，可以使用 JSDoc 风格注释，在 TypeScript 中，类型定义本身就起到了一定的文档作用，但也可以添加额外的注释说明Props的用途和约束。

星途面试题库

面试题：React Props验证类型与组件复用性的关联

知识考点

面试题答案