根据窗口大小更改道具值

Question

我使用 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>

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

Answer 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;
}

然后就使用

const [宽度，高度] = 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 吗？也许您应该更清楚自己要做什么以及正在使用什么。