时间戳

首页 > 解决方案 > 如何集中不同的 proptypes

reactjs - 如何集中不同的 proptypes

问题描述

我想集中可能包含不同属性并且需要或不需要的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,
}),

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

标签： reactjsreusabilityreact-proptypescentralized

解决方案

由于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
  })
}

推荐阅读