Почему оборачивать компонент React внутри стилизованного компонента - плохая идея
Ссылаясь на этот пост: https://www.styled-components.com/docs/faqs#when-should-i-use-styled
(а это: https://github.com/styled-components/styled-components/issues/1226#issuecomment-335240613)
Скажем, у вас есть компонент:
class MyComponent extends React.PureComponent {
render() {
return <div className = {className}>Hello</div>;
}
}
И вы конвертируете его в стилизованный компонент:
export default styled(MyComponent)`
font-size: 20px;
font-weight: bold;
text-align: center;
`;
Почему это не лучшая практика? Почему лучше просто использовать стилизованный компонент внутри? Вот так:
class MyComponent extends React.PureComponent {
render() {
return <MyStyledCmpt>Hello</MyStyledCmpt>;
}
}
const MyStyledCmpt = styled.div`
font-size: 20px;
font-weight: bold;
text-align: center;
`;
Приведите пример, когда это плохая идея (если возможно).
@ ŁukaszWojciechowski интересно. Но в какой-то момент нам нужно будет создать стилизованный компонент-оболочку (например, чтобы стилизовать список более мелких компонентов). Чем это отличается от обертывания всего компонента React в стилизованном компоненте?
@ UkaszWojciechowski я имею в виду: чем render(){ return <MyWrapperStyledCmpt><SmallCmptList>...{even more components}</SmallCmptList></MyWrapperStyledCmpt>;} отличается от styled(MyComponent);
Ссылки, которые вы предоставили, довольно ясно показывают, почему это не лучшая практика. Основная проблема заключается в распределении логики пользовательского интерфейса между несколькими элементами. Почему это плохо? Потому что это ослабляет одну из самых сильных сторон стилизованных компонентов - инкапсуляцию стилей. Все в одном месте упрощает управление кодом (рефакторинг, удаление и т. д.).