Question

我正在尝试为我的某个React组件指定PropTypes并遇到了一些问题。我想要描述的对象看起来像这样（数组将包含多个对象）：

rounds: {
  1: [
       {
         date: 1429354800000,
         arena: 'Arena name',
         scoreHome: 3,
         scoreAway: 2,
         teamHome: 'Home team name',
         teamAway: 'Away team name',
         spectators: 10
       }
     ]
}

我事先不知道会有多少回合。所以我最终可以

rounds: { 1: [..], 2: [..], 3: [..] }

这就是我目前所拥有的（不工作）：

RoundsTable.propTypes = {
  rounds: PropTypes.shape({
    PropTypes.arrayOf(PropTypes.shape({
      date: PropTypes.number.isRequired,
      arena: PropTypes.string.isRequired,
      scoreHome: PropTypes.number.isRequired,
      scoreAway: PropTypes.number.isRequired,
      teamHome: PropTypes.string.isRequired,
      teamAway: PropTypes.string.isRequired,
      spectators: PropTypes.number.isRequired
    }).isRequired).isRequired
  }).isRequired
}

我不确定如何指定包含对象数组的数字。这是我的数据设计问题还是有一个简单的解决方案来指定这些类型的道具？

Answer 1

这是一个数据设计问题。您使用Object作为数组。例如，如果您相应地更改了数据，这将起作用：

RoundsTable.propTypes = {
  rounds: PropTypes.arrayOf(PropTypes.shape({
      date: PropTypes.number.isRequired,
      arena: PropTypes.string.isRequired,
      scoreHome: PropTypes.number.isRequired,
      scoreAway: PropTypes.number.isRequired,
      teamHome: PropTypes.string.isRequired,
      teamAway: PropTypes.string.isRequired,
      spectators: PropTypes.number.isRequired
    }).isRequired).isRequired
}

数据如下所示：

rounds: [
       {
         date: 1429354800000,
         arena: 'Arena name',
         scoreHome: 3,
         scoreAway: 2,
         teamHome: 'Home team name',
         teamAway: 'Away team name',
         spectators: 10
       },
       {...}
]

您丢失了索引，但阵列已经有了这些索引。如果您想要更多类似地图的功能，则需要确定要使用的地图类型，并将PropTypes基于该地图。 Javascript没有原生地图，但人们经常使用Object来达到同样的目的，这有一些限制，例如您遇到的限制。

React PropTypes - 以数字作为键的形状

1 个答案: