在 window 大小的函数中更改道具值

Question

我使用 React-Spring 并且我想在 window 尺寸变化时更改某些组件的偏移量。这是我尝试过的，但没有用，我总是不得不刷新浏览器。

 <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

编辑：

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

这是一个使用钩子的例子

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 吗？也许你应该更清楚你正在尝试做什么以及你正在使用什么。

在 window 大小的函数中更改道具值

Change props value in function of window size

javascript

media-queries

reactjs

react-spring

编辑：