javascript - 根据窗口大小更改 Prop 值

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

编辑:

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

这是一个使用钩子(Hook)的例子

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并传递一个带有媒体查询偏移量的 Prop 。

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

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