Javascript 高阶组件（HOC）和窗口调整侦听器

我有以下几点想法，我考虑创建3个状态，其中这些状态将是我的断点

• 流动的
• 平板电脑
• 桌面

但我想知道，当到达断点时，如何将这些状态设置为true，例如：

• 流动电话：少于767
• 平板电脑：介于768和991之间
• 桌面：在992和1919之间
• 大屏幕：1919和2520

然后，当这些断点中的一个到达时，状态将变为true

还有，我如何才能在我的HOC中只通过一个状态（以正确的为准）

我可以改进这个逻辑吗

import React from "react";

const withWindowResize = Component => {
  class WrappedComponent extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        height: 0,
        width: 0,
        mobile: false,
        desktop: false,
        tablet: false
      };
      window.addEventListener("resize", this.resizeUpdate);
    }

    componentDidMount() {
      this.update();
    }

    resizeUpdate = () => {
      this.setState({
        height: window.innerHeight,
        width: window.innerWidth
      });
    };

    render() {
      return <Component />;
    }
  }
  return WrappedComponent;
};

export default withWindowResize;

从“React”导入React；
常量withWindowResize=组件=>{
类WrappedComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
高度:0,，
宽度：0，
手机：错，
桌面：错误，
片剂：假
};
window.addEventListener（“resize”，this.resizeUpdate）；
}
componentDidMount（）{
这个.update（）；
}
resizeUpdate=（）=>{
这是我的国家({
高度：window.innerHeight，
宽度：window.innerWidth
});
};
render（）{
返回；
}
}
返回WrappedComponent；
};
使用WindowResize导出默认值；

有很多方法可以做到这一点，但是按照您的方法，您可以执行以下操作，其中您只需在您的状态上设置一个

大小

变量，该变量将根据您上面提供的规格进行更改

这样，您只需将

this.state.size

传递给组件

从“React”导入React；
常量withWindowResize=组件=>{
类WrappedComponent扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
大小：this.findSize（）
};
}
componentDidMount（）{
window.addEventListener（“resize”，this.resizeUpdate.bind（this））；//初始化侦听器
}
componentWillUnmount（）{//在组件卸载时删除事件侦听器
removeEventListener（“resize”，this.resizeUpdate.bind（this））；
}
findSize（）{
返回窗口。内部宽度>1919
？“大”
：window.innerWidth>992
？“桌面”
：window.innerWidth>768
“片剂”
：“移动”；//查找当前大小
}
resizeUpdate（）{
const currentSize=this.findSize（）；
这是我的国家({
大小：当前大小
});
}
render（）{
返回；
}
}
返回WrappedComponent；
};
使用WindowResize导出默认值；

请注意，我使用的是

React.PureComponent

作为我们不希望在每次调整窗口大小时更改状态并重新渲染

组件。

这将与使用
React.Component
和在使用
This.setState
之前检查相同，前提是我们的当前大小与我们在更新前的状态不同

if（currentSize！==this.state.size）{
这是我的国家({
大小：当前大小
});
}
我之所以使用它，是因为我的应用程序说无法阅读道具。我想我在emu应用程序中遇到了一些问题。函数App（）{console.log（this.props）返回（）；}导出默认withWindow（App）；我认为创建上下文更好吗？如果您对
应用程序
使用
函数
，而不是类，那么您不能从
此
访问道具，因为
此
是对
窗口的引用，而不是您的组件。尝试
functionapp（props）{console.log（props）return}使用windowresize导出默认值（App）好的，非常感谢，有没有更清晰的选项？或者你认为这是一个好的选择？我认为这种方法最适合你的情况