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

前端之家收集整理的这篇文章主要介绍了javascript – 获取reactjs中组件的可选道具列表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

例如,给出以下道具:

  1. TestComponent.propTypes = {
  2. requiredProp: PropTypes.string.isrequired,optionalProp: PropTypes.func,optionalProp2: PropTypes.element
  3. }

…我可以得到一个包含项目的数组:[“optionalProp”,“optionalProp2”]

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

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

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

但这似乎是对上下文的错误使用.

最佳答案
更新:以下解决方案仅适用于process.env.NODE_ENV!==’production’谨慎使用或不使用

没有经过全面测试,但我设法过滤掉了所需的道具键,并获得了一系列可选道具,如下所示:

  1. /**
  2. * Given a PropTypes Object returns an array of optional
  3. * prop keys.
  4. *
  5. * @param propTypes
  6. */
  7. const optionalProps = propTypes => Object.keys(propTypes).filter(k => propTypes[k].isrequired);
  8. // console.log(optionalProps(TestComponent.PropTypes) output:
  9. // Array [
  10. // "optionalProp",// "optionalProp2",// ]

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

猜你在找的JavaScript相关文章