Как объявить стилизованные компоненты, используя синтаксис класса компонентов React

Question

Как можно объявить стилизованные компоненты вне метода render() компонента React при использовании синтаксиса класса React?

Моя мотивация - компоненты с состоянием, которые случайно перемонтируются.Они перемонтированы из-за того, что их родители стилизованы и объявлены в методе render().Это приводит к тому, что родители воссоздают каждый рендер, и, таким образом, состояние их детей сбрасывается.Эта тема обсуждается в разделе ЧАВО .

Answer 1

Что мы делаем, это создаем стилизованный компонент вне рендера и затем используем его:

example.jsx // statefull component

const StyledDiv = styled.div `
   .... styles
`;

class Header extends Component {
 render() {
  return (
    ... use StyledDiv here
   );
  };
 } ;