如何集中不同的proptypes

Question

我想集中可能包含不同屬性且是否需要的proptypes。 舉個例子：

組件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
  })
}