#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 — локально работает нормально:
Комментарии:
1. Спасибо, это именно то, что мне было нужно. Я думал, что у меня просто где-то неправильный тип, но не знал, где искать мою ошибку.