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

Question

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

我的动机是不小心重新挂载了有状态组件。由于它们的 parents 是样式组件并在 render() 方法中声明，因此它们被重新安装。这会导致 parents 在每次渲染时重新创建，因此它们的 children 的状态会重置。 styled-components FAQ 上讨论了该主题。

Answer 1

我们所做的是在渲染之外创建样式化组件，然后使用它：

example.jsx // statefull component

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

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

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

How to Declare Styled Components Using React Component Class Syntax

reactjs

styled-components