Reactjs使用从BE获取的数据在popover上渲染问题

Question

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

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

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

问题是弹出框对话框在视口外部渲染并使水平滚动条出现。 我想用内容显示popover，而对话框没有延伸到视图端口，也没有水平滚动条。

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

Answer 1

popover定位为“绝对”，左边为calc（100％ - 40％）！重要 。

你可以做一件事。 给“ant-popover”类赋予右边的CSS ：0 。 然后它将删除水平滚动。

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);
  })
}