样式组件警告建议我使用 `attrs` 方法，即使我是？

Question

我有一个样式组件渲染了 3 次，每次都有视差效果。

const ParallaxContainer = styled.section`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.3;
  bottom: ${props => props.bottomValue}px;
`;

视差是bottom通过非常昂贵的计算更新每个 scrollEvent的值来实现的。意思是，这个组件经常被重新渲染。

不出所料，我收到了警告Over 200 classes were generated for component styled.section. Consider using the attrs method, together with a style object for frequently changed styles.所以我尝试遵循建议，并将组件重构为：

const ParallaxContainer = styled.section.attrs(
  ({ bottomValue }) => ({
    style: {
      bottom: bottomValue + "px"
    }
  })
)`
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0.3;
`;

但我仍然遇到同样的错误。我究竟做错了什么？

沙盒演示我的问题：https : //codesandbox.io/embed/styled-components-is-yelling-at-me-attrs-zhnof

Answer 1

问题是你留下的线条在你的风格中被注释掉了。请记住，您的样式只是一个模板字符串。CSS 样式的注释行仅在字符串被插入并传递给样式组件后才会被忽略。

在Over 200 classes首先发生了错误，因为风格的字符串需要在每一个滚动事件，这导致了一个全新样式的组件实例被重新计算的。把它移到attrs就像用老式的 React 方式在 JS 中定义样式一样，所以这些样式不经过 Styled Components。