我使用 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>
我应该使用功能渲染吗?或其他解决方案
最佳答案
编辑:
我认为问题是当窗口调整大小时,它不会更新值并且偏移量不会改变,你应该做的是让一个监听器来查看窗口何时调整大小时并保存状态。
这是一个使用钩子(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
吗?也许你应该更清楚你正在尝试做什么以及你正在使用什么。
关于javascript - 根据窗口大小更改 Prop 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59219250/