reactjs - 如何集中不同的 proptypes

Question

我想集中可能包含不同属性并且需要或不需要的属性类型。举个例子:

组件 A 具有:

roomData: PropTypes.shape({
  roomId: PropTypes.number,
  roomType: PropTypes.string,
}).isRequired,

而组件 B 具有:

roomData: PropTypes.shape({
  roomId: PropTypes.number.isRequired,
  roomType: PropTypes.string.isRequired,
  game: PropTypes.shape({
    gameId: PropTypes.number.isRequired,
    drawDescription: PropTypes.string.isRequired,
  }).isRequired,
}),

如果两者完全一样，我知道该怎么做。问题在于它们是不同的。

Answer 1

由于 PropTypes.shape 需要一个普通的 JS 对象，因此您可以创建一个外部文件来保存形状并在需要时使用/组合它们。

它类似于utils/propTypesShapes.js:

import PropTypes from 'prop-types'
export const transformToRequired = (shape) => {
  return Object.keys(shape).reduce((acc, curr) => {
    acc[curr] = shape[curr].isRequired;
    return acc;
  }, {})
}
export const roomDataBaseShape = {
  roomId: PropTypes.number,
  roomType: PropTypes.string,
}

然后在你的组件中:

import { roomDataBaseShape, transformToRequired } from 'propTypes/shapes'
ComponentA.propTypes = {
  roomData: PropTypes.shape(roomDataBaseShape).isRequired
}

ComponentB.propTypes = {
  roomData: PropTypes.shape({
    ...transformToRequired(roomDataBaseShape),
    game: PropTypes.shape({
      gameId: PropTypes.number.isRequired,
      drawDescription: PropTypes.string.isRequired
    }).isRequired
  })
}