如何使用React Component类语法声明样式化的组件

Question

使用React类语法时，如何在React组件的render()方法之外声明样式化的组件？

我的动机是有状态的组件被意外重新安装。由于其父级为样式化组件并在render()方法中声明，因此重新安装了它们。这将导致父母在每次渲染时都被重新创建，从而重置孩子的状态。在styled-components FAQ上讨论了该主题。

Answer 1

我们要做的是在render外部创建样式化的组件，然后使用它：

example.jsx // statefull component

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

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