Javascript 基于窗口宽度的反应弹出窗口

我想根据宽度大小改变弹出窗口的位置

我考虑在每次调整大小时监听resize并更新状态，执行如下操作：

componentDidMount() {
    window.addEventListener('resize', this.listenResize);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.listenResize);
}

并使用setState（）触发渲染

我的弹出窗口如下所示：

render(<PopUp infos={this.props.infos}/>

渲染(

然后我捕捉弹出窗口的位置来定义它是否离开屏幕

但是，我无法获得弹出位置，因为它没有渲染，并且有多个弹出窗口（从地图渲染）

我也觉得这会烧掉我的表演

我需要一些建议

谢谢

---

编辑：例如，我想根据窗口大小渲染一个左/上/右/下弹出窗口，如果弹出窗口位于左侧时不在窗口内，它会将弹出窗口置于底部，而不是每次渲染都检查屏幕大小，只需给弹出窗口组件一个基于百分比的宽度，并使用内容将其居中即可

---

我希望我解释清楚，如果没有请告诉我，这样我可以更详细地解释你的问题不清楚，但使用外部库的一个解决方案。

---

您可以使用材质UI库（对话框）来显示弹出窗口，您不必担心窗口大小，因为这是由库处理的。

您的解释没有告诉我们为什么不显示弹出窗口？但是，您应该在显示前设置弹出窗口的位置。请在渲染前进行计算。