Оператор Switch в компоненте React

Question

пытается создать компонент, который возвращает несколько разных стилевых компонентов на основе реквизита. Вот что я получил:

  const Type = ({ props }) => {
  const { right, center } = props;

  switch (props) {
    case props.paragraph:
      return <StyledParagraph right={right} center={center} {...props} />;
    case props.h1:
      return <StyledHeadingOne right={right} center={center} {...props} />;
    case props.h2:
      return <StyledHeadingTwo right={right} center={center} {...props} />;
    case props.h3:
      return <StyledHeadingThree right={right} center={center} {...props} />;
    case props.h4:
      return <StyledHeadingFour right={right} center={center} {...props} />;
    case props.h5:
      return <StyledHeadingFive right={right} center={center} {...props} />;
    case props.h6:
      return <StyledHeadingSix right={right} center={center} {...props} />;
    default:
      return <SetTypeError right={right} center={center} {...props} />;
  }
};

Возвращается, что реквизиты не определены. Я называю компонент следующим образом:

Answer 1

Написав ({ props }), вы удаляете свойство props из объекта props, который является первым параметром компонента, что эквивалентно следующему:

const Type = (param) => {
  const props = param.props;
  const { right, center } = props;

  // ...
};

Просто напишите (props), чтобы присвоить объекту реквизита значение props, и он будет работать как положено.

const Type = (props) => {
  const { right, center } = props;

  // ...
};