瞬间搞定：JSON To React PropTypes — Numio

把 JSON 格式的示例 props 对象转换为 React propTypes 对象。嵌套对象变为 PropTypes.shape，字符串数组变为 PropTypes.arrayOf(PropTypes.string)，null 值变为 PropTypes.any。

根据 JavaScript React 组件接收的数据示例，为其添加运行时 prop 检查。

JSON

PropTypes

适用场景

根据 JavaScript React 组件接收的数据示例，为其添加运行时 prop 检查。
用已知的示例数据为旧的类组件记录 props。

使用方法

粘贴示例 props 的 JSON 对象；根节点为对象数组时会先合并为一个对象。
查看 const propTypes = {...} 代码块；嵌套对象显示为 PropTypes.shape({...})。
复制它，添加 import PropTypes from "prop-types"，赋值给 MyComponent.propTypes，并在需要处加上 .isRequired。

JSON props

{
  "title": "Release notes",
  "count": 3,
  "visible": true,
  "tags": ["web", "react"],
  "author": { "name": "Ada", "avatarUrl": "https://example.com/a.png" },
  "links": [
    { "label": "Docs" },
    { "label": "Repo", "url": "https://example.com/repo" }
  ],
  "badge": null
}

React PropTypes

const propTypes = {
  title: PropTypes.string,
  count: PropTypes.number,
  visible: PropTypes.bool,
  tags: PropTypes.arrayOf(PropTypes.string),
  author: PropTypes.shape({
    name: PropTypes.string,
    avatarUrl: PropTypes.string,
  }),
  links: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      url: PropTypes.string,
    }),
  ),
  badge: PropTypes.any,
}

功能与限制

在浏览器的 Web Worker 中由本站自己的生成器运行，再经 Prettier 格式化；不发起服务器请求。

不会把任何 prop 标记为 .isRequired，也无法从 JSON 推断函数、元素或枚举。

对于对象数组，所有元素会合并为一个 PropTypes.shape，因此只出现在后面元素中的键也会包含在内。

混合类型数组变为 PropTypes.arrayOf(PropTypes.oneOfType([...]))，嵌套数组变为 arrayOf(arrayOf(...))，空数组变为 PropTypes.array。

FAQ

可以粘贴 JSON 数组吗？

可以，只要其中是对象：元素会合并为一个对象，结果列出任一元素中出现的所有键。根节点为字符串或数字数组时会被拒绝。

null 值的类型是什么？

PropTypes.any，因为 null 无法说明实际类型。请替换为预期的校验器，例如 PropTypes.string。

PropTypes 在 React 19 中还有效吗？

无效。React 19 移除了 propTypes 检查，这些定义会被静默忽略。请在 React 18 及更早版本中使用此输出，或改用 TypeScript 类型。

规范与参考资料

prop-types on GitHub