Question

这是问题https://codesandbox.io/s/nice-cache-kl12v

的沙盒

我正在使用antd设计网站。目前，我需要向用户显示通知，并且导航栏的右上角有通知图标。

我使用antd设计的Popover渲染了它，当单击它时，它将从BE中获取数据并显示它们。

问题是弹出对话框在视口外渲染并显示水平滚动条。我想显示带有内容的弹出框，而对话框不会超出视口并且没有水平滚动条。

我已经尝试使用overflow-x：hidden属性来隐藏滚动条，该滚动条是隐藏的，但是弹出内容不可见。请帮忙！

Answer 1

弹出窗口位于“绝对”位置，左侧为 calc（100％-40％）！important 。

您可以做一件事。为“ ant-popover”类提供 right：0 的CSS。然后它将删除水平滚动。

Answer 2

让我们在InfiniteScrollExample的父级中定义一个回调函数为：

onInfiniteScrollUpdated = () => {
  this.setState({InfiniteScrollUpdate: this.state.InfiniteScrollUpdate + 1})
}

让我们将此方法作为对InfiniteScrollUpdate的支持，传递为：

<Popover
  placement="bottomLeft"
  title={text}
  content={<InfiniteScrollExample />}
  trigger="click"
  afterInfiniteScrollApiSuccess={this.onInfiniteScrollUpdated}
>
   <Button>Msgs</Button>
</Popover>

在InfiniteScrollExample中，您必须在成功完成BE调用并更新视图之后调用此prop。如果在componentDidMount中进行BE调用，它将类似于：

componentDidMount() {
  fetch(url).then(res => {
    this.setState({apiRes: res.data}, this.afterInfiniteScrollApiSuccess);
  })
}

从BE获取数据的弹出窗口上的Reactjs Render问题

2 个答案: