如何为React组件指定必填Props，明确使用时需传入的数据？

针对你用的React类组件，有几种实用的方式来标记并强制必填Props，让组件使用者明确知道必须传哪些数据：

1. 使用PropTypes做运行时校验（React官方推荐） #

这是React生态里传统且成熟的做法，专门用来定义组件的Prop类型和必填性，在开发模式下如果没传必填Prop，控制台会抛出清晰的警告，帮开发者快速定位问题。

首先需要安装PropTypes包（React 15.5+版本已经把PropTypes从核心包分离出来了）：

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

修改你的ABC组件代码如下：

import PropTypes from 'prop-types';

class ABC extends React.Component{
  render(){
    return (<View>{this.props.reqProp}</View>)
  }
}

// 给组件添加Prop校验规则
ABC.propTypes = {
  // 标记reqProp为必填的字符串类型，你也可以根据实际需求改成其他类型（比如number、object等）
  reqProp: PropTypes.string.isRequired
};

这样一来，当你在ABC_Caller里忘记传reqProp时，浏览器控制台会立刻弹出警告，明确提示这个Prop是必填项，开发者一眼就能明白哪里出问题了。

2. 使用TypeScript做静态类型检查（编译阶段提前拦截） #

如果你的项目使用TypeScript，这种方式会更高效——在编译阶段就能发现没传必填Prop的问题，不用等到运行时才暴露错误，还能提供类型提示，提升开发体验。

你可以给组件的Props定义一个接口，明确标记必填字段：

import React from 'react';

// 定义Props接口，reqProp是必填的string类型
interface ABCProps {
  reqProp: string;
}

class ABC extends React.Component<ABCProps>{
  render(){
    return (<View>{this.props.reqProp}</View>)
  }
}

class ABC_Caller extends React.Component{
  render(){
    // 如果这里没传reqProp，TypeScript在编译时就会直接报错
    return ( <ABC reqProp={'testData'} /> )
  }
}

3. 手动添加运行时校验（兜底方案） #

如果不想额外引入依赖包，也可以在组件的构造函数里手动检查必填Prop，直接抛出错误强制开发者处理：

class ABC extends React.Component{
  constructor(props) {
    super(props);
    // 检查reqProp是否存在，这里可以根据实际需求调整判断逻辑
    if (props.reqProp === undefined || props.reqProp === null) {
      throw new Error('ABC组件：reqProp是必填属性，请务必传入！');
    }
  }

  render(){
    return (<View>{this.props.reqProp}</View>)
  }
}

这种方式会直接中断代码执行，适合对必填性要求极高的场景。

总结一下：普通JavaScript项目优先用PropTypes；TypeScript项目推荐用接口定义Props；手动校验可以作为兜底补充，根据你的项目场景选择就行。

内容的提问来源于stack exchange，提问作者Jude Fernandes