使用从 BE 获取的数据的弹出框上的 Reactjs 渲染问题答案

【问题标题】：Reactjs Render issue on popover with data fetched from BE使用从 BE 获取的数据的弹出框上的 Reactjs 渲染问题
【发布时间】：2019-05-20 23:25:15
【问题描述】：

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

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

我使用 antd design 的 Popover 渲染它，当点击它时，它会从 BE 获取数据并显示它们。

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

我尝试过使用overflow-x:hidden 属性来隐藏滚动条，滚动条是隐藏的，但是popover 的内容是不可见的。请帮忙！

【问题讨论】：

你的 InfiniteScrollExample.js 文件是空的
嗨，Akshay kishore，您可以检查一次，因为所有代码仍然可用

标签： javascript html css reactjs antd

【解决方案1】：

弹出框定位为“绝对”，左侧为 calc(100% - 40%) !important。

你可以做一件事。给“ant-popover”类一个 right:0 的 CSS。然后它将删除水平滚动。

【讨论】：

对不起，我正在尝试使用 calc(100% - 40%) 进行一些修复！重要。但这并没有按预期工作，CSS right:0 也无法正常工作，请您帮忙

【解决方案2】：

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

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

让我们将这个方法作为一个 prop 传递给InfiniteScrollUpdate：

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

在InfiniteScrollExample 中，您必须在 BE 调用成功并更新视图后调用此道具。如果您在 componentDidMount 中进行 BE 调用，它将如下所示：

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

【讨论】：

嗨，在这个屏幕截图中，您在弹出框上有静态内容，因此可以正确渲染，但是当我们从 BE 获取数据时，弹出框大小会发生变化并溢出视口。你能试试动态内容吗
知道了... 可以在响应没有准备好的时候有一个加载组件，只有在收到响应时才指向InfiniteScroll组件。比如：<Popover content={this.state.popoverApiResponse ? <InfiniteScrollExample /> : <Loading />} />
实际上 InfiniteScrollComponent 是完全构建的，当你点击弹出框时会得到响应，当你滚动时，它会再次调用 BE 来获取更多项目。如果您检查我的沙箱，只有第一次点击弹出框有问题，因为最初没有数据并且弹出框窗口很小，但是当收到数据时，弹出框窗口会扩展到视口之外，进一步点击它，窗口会自动调整.如果能够解决最初的问题，那将非常有帮助
我怀疑的是，在第一次点击时，InfiniteScrollExample 是空白的，因此必须占用更少的空间。当 BE 调用成功时，InfiniteScrollExample 的大小会增长，而不会让Popover 知道它已被重新渲染。如果您修复代码以在 InfiniteScrollExample 的大小增加时重新渲染其父级，则问题可能会得到解决。也许您可以将回调函数作为道具发送到InfiniteScrollExample。
太棒了，是的，兄弟我也有同样的想法，但不知道该怎么做