如何根据当前视口大小选择将传递不同的道具发送到 react 组件?

Question

有没有办法根据当前视口大小将不同的道具传递给组件？

我知道您可以使用以下方法获取当前高度和宽度

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

1440px 到 1000px 之间的图像 我已经向组件发送了一些数据，当它的视口缩小到 1000 像素以下和 768 像素以上时，我需要向该组件发送另一组数据。如何在 React 中实现此功能？

Answer 1

有几种方法可以解决这个问题。我建议使用 ResizeObserver API：

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

如果需要，有用于此的填充物： https://github.com/juggle/resize-observer

您可以在组件状态下设置要发送的道具，然后侦听调整大小事件。当窗口调整大小时，您将获得新的窗口大小，并相应地设置要传递给处于该状态的组件的 props。React会触发重新渲染，属于窗口大小的props被传递给子组件。

Answer 2

您可以为resize事件创建侦听器，并根据宽度提供决定它是否移动或其他任何内容(isMobile例如(。

以下使用此方法的代码

但是这种方法会影响性能，因为不必要的渲染。然后，您需要添加debouncing或throttling以提高性能。

所以为了避免这种情况，我建议使用反应大小

class MyComponent extends React.Component {
state = {
isMobile: false
}
handleWindowResize = () => {
this.setState({ isMobile: window.innerWidth < 480 });
}
componentDidMount() {
window.addEventListener('resize', this.onWindowResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize);
}
render() {
const { items } = this.props;
const { isMobile } = this.state;
return (
<SomeComponent isMobile={isMobile}>
{items}
</SomeComponent>
);
}
}

代码参考

希望对您有所帮助!!