使用动态键对对象进行PropTypes检查

React有很多使用PropTypes来检查道具价值的方法。我通常使用的是React.PropTypes.shape({...})但是,最近我遇到一种情况,即我有一个对象,该对象内部将具有动态键/值。我知道每个键都应该是一个字符串(采用已知格式),每个值都应该是一个int。即使使用自定义道具验证功能,它仍然假设您知道道具的钥匙。如何使用PropTypes检查对象/形状的键和值是否正确?

...
someArray: React.PropTypes.arrayOf(React.PropTypes.shape({
  // How to specify a dynamic string key? Keys are a date/datetime string
  <dynamicStringKey>: React.PropTypes.number
}))
...

再说一遍:我至少要检查每个键的值是一个数字。理想情况下,我还希望能够检查密钥本身是否为格式正确的字符串。

JinJinStafanL2020/03/18 15:48:12

要仅验证值,可以使用React.PropTypes.objectOf

...
someArray: React.PropTypes.arrayOf(
  React.PropTypes.objectOf(React.PropTypes.number)
)
...
小哥GO2020/03/18 15:48:12

我的问题是...

  • 对象具有动态键(我不想检查)
  • 值具有固定的数据结构(我想检查)
  • 基础数据结构的形状是已知的,可以检查

    // An object with property values of a certain shape
    optionalObject: PropTypes.objectOf(
      PropTypes.shape({
        color: PropTypes.string.isRequired,
        fontSize: PropTypes.number
      })
    );
    

因此,对于我的问题,缺少的部分是PropTypes.objectOf从那里您可以使用动态键创建任何类型的结构。结合起来PropTypes.oneOfType也变得非常灵活。

猿小胖2020/03/18 15:48:12

对于使用Immutable.jsreact-immutable-proptypes库的用户,可以使用.mapOfmethod。

someArray: ImmutablePropTypes.listOf(ImmutablePropTypes.mapOf({
  React.PropTypes.number, // validates values
  React.PropTypes.string, // validates keys
}))