Styled-component 警告提示我使用 `attrs` 方法，即使我是？

Question

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

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

视差是通过非常昂贵的计算更新每个 scrollEvent 的 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 风格的注释行仅在字符串被插入并传递给 Styled Components 后才会被忽略。

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

Styled-component 警告提示我使用 `attrs` 方法，即使我是？

Styled-component warning suggesting I use `attrs` method even though I am?

reactjs

parallax

styled-components