React PropTypes中isRequired的使用时机及不适场景

简单来说：只要组件在没有该prop的情况下，依然能正常工作、有合理的兜底逻辑，就不需要加isRequired。具体常见场景如下：

• 带有合理默认值的props
  如果你的prop已经通过ES6默认参数或者defaultProps设置了默认值，不传这个prop时组件也能按预期渲染，就没必要加isRequired。比如一个带尺寸选项的按钮组件：

  import PropTypes from 'prop-types';
  
  const Button = ({ size = 'medium', children }) => {
    return <button className={`btn btn-${size}`}>{children}</button>;
  };
  
  Button.propTypes = {
    // 不用isRequired，因为有默认值兜底
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    // 没有children按钮就失去意义，必须加isRequired
    children: PropTypes.node.isRequired,
  };
  

  这种情况下，强制加isRequired反而会触发不必要的警告，因为默认值已经处理了不传的情况。

• 属于可选功能的props
  某些prop是用来开启/关闭组件的非核心功能，或者是可选的回调、配置项，不传时组件的核心逻辑不受影响。比如卡片组件的showAvatar（控制是否显示头像）、列表组件的onItemClick（仅当需要点击交互时才传入），这类prop都不需要加isRequired。

• 允许传入null/undefined的场景
  有些业务逻辑中，你会故意不传某个prop（或者传undefined/null）来触发组件的特定行为，比如模态框的initialOpen：不传时组件自己管理弹窗状态，传值时使用外部控制的状态。这种情况下，isRequired会限制合理的用法，所以不能加。

• 父组件会条件性传入的props
  如果父组件是根据某个状态动态决定是否传入prop（比如仅在筛选功能激活时传filter参数），那么子组件必须能处理不传的情况，此时这个prop就不能加isRequired。比如：

  // 父组件
  <ProductList filter={isFilterEnabled ? currentFilter : undefined} />
  

核心判断依据 #

一句话：只有当组件没有该prop就完全无法渲染、或者核心逻辑直接崩溃时，才需要添加isRequired。反之，只要有兜底方案（默认值、空值处理、可选逻辑），都应该把prop设为可选，不用加isRequired。

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