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

Question

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

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

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

不出所料，我收到了警告 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。