Как мне использовать StyledComponent, где React .Ожидается ли компонент?

#reactjs #typescript #styled-components

#reactjs #typescript #styled-components

Вопрос:

Я пытаюсь создать приложение typescript React, которое и столкнулось с проблемой при использовании styled-components . Ниже приведено приблизительное представление о том, что я пытаюсь:

 import React from 'react';
import styled from 'styled-components';

export type MyProps = {
  wrapper?: React.Component,
};

const DefaultWrapper = styled.div`
  background: blue;
`;

const MyComponent = ({wrapper: Wrapper = DefaultWrapper}: MyProps) => {
  return <Wrapper className='my-wrapper'>
    Some child content
  </Wrapper>;
}

export default MyComponent;
  

Моя проблема возникает, когда я пытаюсь выполнить рендеринг MyComponent в другом компоненте, поскольку он выдает сообщение об ошибке JSX element type 'Wrapper' does not have any construct or call signatures .

Я хотел бы каким-то образом использовать стилизованный компонент либо как значение по умолчанию, либо как допустимое значение для wrapper prop таким образом, чтобы не показывать, что я использую стилизованные компоненты внутри. Буду признателен за любую помощь.

Ответ №1:

Проблема

React.Component является элементом класса React (а не типом), вместо этого используйте тип React.ComponentType<any> . Если вы работаете с ограничениями типа компонента и ожидаете wrapper , что это будет определенный тип компонента, затем замените React.ComponentType<any> его на необходимые ограничения — например React.ComponentClass<any, any> , для компонентов на основе классов или React.FC<any> для функциональных компонентов.

Решение

 import * as React from "react";
import styled from "styled-components";

export type MyProps = {
  wrapper?: React.ComponentType<any>;
};

const DefaultWrapper = styled.div`
  background: blue;
`;

const MyComponent = ({ wrapper: Wrapper = DefaultWrapper }: MyProps) => {
  return <Wrapper className="my-wrapper">Some child content</Wrapper>;
};

export default MyComponent;
  

Рабочий репозиторий

Игнорируйте 'React' was used before it was defined. предупреждение eslint, это проблема с codesandbox — локально работает нормально:

Редактировать Typescript - Defaults

Комментарии:

1. Спасибо, это именно то, что мне было нужно. Я думал, что у меня просто где-то неправильный тип, но не знал, где искать мою ошибку.