如何从React组件中提取PropTypes、isRequired及defaultProps相关信息？

先修正代码笔误 #

你组件里定义默认属性的属性名写错了，React 组件的默认值配置属性是defaultProps，不是defaultPropTypes，修正后才能正常拿到默认值：

// 错误写法
// MyComponent.defaultPropTypes = {
// 正确写法
MyComponent.defaultProps = {
    text1: 'React',
    text2: 'is cool',
}

方案1：使用react-docgen提取（生产场景推荐） #

react-docgen是专门用于提取 React 组件元信息的工具，原生支持解析 PropTypes 的类型、必填标记、默认值，还支持提取组件注释，直接输出结构化数据，不需要自己处理兼容问题。
使用步骤：

1. 安装依赖

npm install react-docgen -D

2. 编写提取脚本

const docgen = require('react-docgen');
const fs = require('fs');
// 读取组件文件内容
const componentCode = fs.readFileSync('./MyComponent.jsx', 'utf8');
// 解析得到组件文档信息
const componentDoc = docgen.parse(componentCode);
// 打印属性信息，直接可用于渲染属性表
console.log(componentDoc.props);

输出的componentDoc.props每个属性的结构包含：

• name：属性名
• type.name：PropType 类型名，比如string
• required：布尔值，标记是否必填
• defaultValue.value：默认值内容

方案2：手动解析 PropTypes（适合自定义轻量场景） #

PropTypes 暴露的校验函数自带可识别的标记位，可以直接提取类型和必填信息，搭配公开的defaultProps属性就能拿到完整的属性配置：

import MyComponent from "./MyComponent";

const getComponentPropList = (Component) => {
  const propTypes = Component.propTypes || {};
  const defaultProps = Component.defaultProps || {};
  
  return Object.keys(propTypes).map(propName => {
    const validator = propTypes[propName];
    return {
      // 属性名
      propName,
      // 类型名，标准PropTypes都内置typeName属性
      type: validator.typeName || '未知类型',
      // 必填判断：非必填的校验函数会携带isRequired属性，必填的校验函数没有该属性
      required: !('isRequired' in validator),
      // 默认值
      defaultValue: defaultProps[propName] ?? '无'
    }
  })
}

// 拿到属性列表直接渲染表格即可
console.log(getComponentPropList(MyComponent));

注意：如果是自定义的PropTypes校验函数，可能没有内置typeName属性，这种场景建议用方案1的react-docgen处理兼容性更好。

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