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

Question

有没有办法获取任何propTypes引用可选属性的键(即未指定为必需)？

例如,给出以下道具:

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

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

如果没有内置的方法来做到这一点,那么有一个优雅的解决方案:

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

我正在考虑使用上下文来定义这样的函数,然后在当前组件上调用它,如下所示: 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 应用程序中的任何位置使用。