根据寡妇宽度反应弹出窗口

Question

我想根据宽度大小更改弹出位置。

我想过每次调整大小时都会监听调整大小并更新状态：

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

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

并使用setState（）触发渲染。

我的弹出窗口的名称如下：

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

然后我抓住弹出窗口的位置，以定义是否不在屏幕上。

但是，我无法获得PopUp位置，因为它没有被渲染，而且PopUp（从地图渲染）有多个倍数

我也觉得这会烧掉表演

我需要一些建议！

谢谢

EDIT：例如，我想根据窗口大小渲染左/上/右/下弹出窗口，如果弹出窗口位于左侧时不在窗口外，则将弹出窗口置于底部

Answer 1

与其检查每个渲染器的屏幕尺寸，不如给您弹出组件一个基于百分比的宽度，并用justifyContent居中。

希望我能清楚地解释一下，请告诉我，以便我能更详细地解释

Answer 2

您的问题尚不清楚，但这是使用外部库的一种解决方案。 您可以将Material-UI库（对话框）用于弹出窗口，而不必担心窗口的大小，因为它由库处理。