1

我使用 React-Spring，我想在窗口大小发生变化时更改某些组件的偏移量。这是我尝试过的，但不起作用，我总是必须刷新浏览器。

 <ParallaxLayer
          className="elements"
          offset={window.innerWidth < 576 ? 2.9 : 1.5}
          speed={1}
        >
          <h2 className="title-section Apropos"> A propos</h2>
          <div className="main-Apropos">
            <p className="para p1">
              dolores et quas molestias excepturi sint occaecati cupiditate
            </p>
            <p className="para p2">
              animi, id est laborum et dolorum fuga. Et harum quidem rerum
            </p>
          </div>
        </ParallaxLayer>

我应该使用功能渲染吗？或其他解决方案

4

1 回答 1

1

编辑：

我认为问题在于，当窗口调整大小时，它不会更新值并且偏移量不会改变，你应该做的是让一个监听器来查看窗口何时调整大小并保存状态。

这是一个使用钩子的例子

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

然后就用

常量 [宽度，高度] = useWindowSize();

return (
    <ParallaxLayer
        className="elements"
        offset={width < 576 ? 2.9 : 1.5}
        speed={1}
    >
    ...
    </ ParallaxLayer>
)

您可以采用不同的方法或完全按照您的意愿行事。

简单的方法是拥有两个具有不同媒体查询值的类，然后简单地切换类。

或者

您可以使用styled-components并传递带有媒体查询偏移量的道具。

const MyComponent = styled.div`
  @media (your media query) {
    offset: ${props => props.offset};
  }
`;

但是......我认为你的问题中缺少一些东西，你不是在使用react-spring吗？也许你应该更清楚你正在尝试做什么以及你正在使用什么。

于 2019-12-06T19:37:54.450 回答