在 reactjs 中获取组件的可选道具列表

Question

有没有办法获取引用可选属性（即未指定为必需）的任何 propTypes 的密钥？

例如，给定以下道具：

TestComponent.propTypes = {
    requiredProp: PropTypes.string.isRequired,
    optionalProp: PropTypes.func,
    optionalProp2: PropTypes.element
}

...我可以得到一个包含项目的数组吗：["optionalProp", "optionalProp2"]

如果没有内置的方法来做到这一点，是否有一个优雅的解决方案：

1. 避免对它们的列表进行硬编码
2. 避免从已实现此功能的自定义类派生
3. 可以在我所有的 react 组件中使用

我正在考虑使用上下文来定义这样一个函数，然后像这样在当前组件上调用它：this.context.getOptionalProps.call(this)

但这似乎是对上下文的不好使用。

Answer 1

更新：以下解决方案仅适用于process.env.NODE_ENV !== 'production' 谨慎使用或不要使用

没有经过彻底测试，但我设法过滤掉了所需的道具键，并获得了一组可选道具，如下所示：

  /**
   * Given a PropTypes Object returns an array of optional
   * prop keys.
   *
   * @param propTypes
   */
  const optionalProps = propTypes => Object.keys(propTypes).filter(k => propTypes[k].isRequired);

  // console.log(optionalProps(TestComponent.PropTypes) output:
  // Array [
  //   "optionalProp",
  //   "optionalProp2",
  // ]

然后只需将其导出并导入以在您的 React 应用程序中的任何位置使用。