Как я могу централизовать проптипы, которые не совпадают - PullRequest
Новая
       48

Как я могу централизовать проптипы, которые не совпадают

0 голосов
/ 29 августа 2018

Я хочу централизовать проптипы, которые могут содержать разные свойства и быть или не обязательны. Как пример:

Компонент А имеет: 

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,
}),

Если оба ПОЛНОСТЬЮ одинаковы, я знаю, как это сделать. Проблема в том, что они разные.

1 Ответ

0 голосов
/ 19 октября 2018

Поскольку 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
  })
}
...