问题标签 [react-infinite]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1730 浏览

javascript - loadmore 不使用 react-infinite-scroller 触发

每次向下滚动时,我都使用这个库 react-infinite-scroller 来加载更多项目,但由于某种原因,我没有触发 loadmore。

代码如下所示:

如果我在讲师中绑定 fetchCompanies,那么它会无限地调用该函数,即使每次调用页面都会不断增加,这很好,但问题是它会一直调用无限,甚至没有滚动!

知道如何解决这个问题吗?

0 投票
1 回答
206 浏览

javascript - react-infinite-scroller 没有加载正确数量的项目

我正在尝试实现无限加载,但调用要么在达到所需数量之前停止,要么超过它

这是我的示例代码:

maxNumber 为 10 的 console.log 输出为:

所以它不会一路走好,对于 2 的 maxNumber 是:

所以它在上面。

似乎 hasMore 是真还是假都没有关系。你能帮助我吗?

0 投票
0 回答
3143 浏览

reactjs - 在滚动上反应分页

我必须在第一次做的时候实现聊天系统并且我被卡住了。我必须每次都将页面编号传递给后端 api 以获取新数据。我必须在滚动时将页面编号传递给 api。我正在使用 [1]:https ://www.npmjs.com/package/react-infinite-scroller

我从 api.scroll 获取总数据计数和每页 9 个数据数组,直到总计数可用,当用户滚动到顶部时应该加载更多。我尝试了很多模块,但未能在滚动上实现分页。使用 react-infinite -scroll 模块我得到页面没有,但它没有按我想要的方式工作。请建议我正确的方法

这是我的组件代码

这是我的减速机

0 投票
0 回答
300 浏览

reactjs - 如何将 React Data Grid 与 react-infinite-scroll-component 合并?

我想将 React Data Grid 与 react-infinite-scroll-component 一起使用,是否有可能一起使用它。

我之所以想一起使用,是为了利用数据网格功能的优势。

我尝试使用“带有 scrollableTarget 的无限滚动(可滚动的父元素)”,但 ReactDataGrid 将作为子元素而不是父元素。任何解决方案?

如果这是不可能的,那么如果在无限组件中可用,我可以使用相同类型的特色数据网格。

谢谢,

0 投票
1 回答
294 浏览

electron - 根据 CSS 规则测量文本的高度 - _无需浏览器渲染_ - 用于虚拟化列表,提前指定高度

我一直在 Electron (Chrome) 和 React 中实现一个聊天客户端。我们的首要任务是速度。因此,我们应该使用虚拟化列表组件(也称为“缓冲渲染”或“窗口渲染”)。我们已经探索了 react-virtualized、react-window 和 react-infinite 等。

所有这些组件的一个共同问题是,如果支持可变高度的列表元素,则需要提前知道高度。现在,有些聊天很长,有些很短,这对我们来说是一个挑战。(由于 EXIF 数据和 ffprobe,图像和视频很容易)。

因此,我们面临着测量高度的挑战,同时还要努力提高性能。一种明显的技术是将元素放在浏览器容器的视口外,执行测量,然后渲染列表。但这在性能要求方面伤害了我们。像 react-virtualized/CellMeasurer (不再由原作者维护)和 react-window 等软件使我们使用了这种技术,内置在库中,但性能有点慢而且不可靠。一个可能更高效的类似想法是使用背景电子浏览器窗口进行渲染和测量,但我的直觉是不会那么快。

我认为必须有一些解决方法来提前计算字符串高度,根据自动换行、最大宽度和字体规则。

我目前的想法是使用像string-pixel-width这样的库,以便在我们通过 API 获取文本数据后立即计算行高。基本上,该库使用这段代码来生成字符宽度 [*] 的映射。然后,一旦我们知道每个文本有多宽,我们就会在计算出的最大行宽达到最大值时将每一行分开,最后通过行数推断列表元素的高度。由于断词,这将需要一些算法摆弄,但有一些库可以帮助解决这个问题 - css-line-break似乎很有希望。

[*] 我们将不得不稍微修改它以考虑所有 Unicode 字符范围,但这是微不足道的。

我尚未完全探索的一些选项包括 python weasyprint 项目和 facebook-yoga 项目。我对你的想法持开放态度!

0 投票
0 回答
96 浏览

node.js - 如何在 Kotlin 中包装 react-infinite-grid React 模块?

我想在 Kotlin 中使用 react-infinite-grid http://ggordan.com/post/react-infinite-grid.html

我已经看到如何在 React-Kotlin 中导入节点模块?

下面的代码是我的参考:

无限网格.kt

主文件

但是,我有错误:

错误:元素引用被指定为字符串(包装器),但没有设置所有者。这可能由于以下原因之一而发生:

  1. 您可能正在向功能组件添加 ref
  2. 您可能正在向未在组件的 render 方法中创建的组件添加 ref
  3. 您加载了多个 React 副本,请参阅https://reactjs.org/warnings/refs-must-have-owner.html了解更多信息。

在此处输入图像描述

我试过如何在 React-Kotlin 中导入节点模块?两种方式都不成功。

请帮助我

谢谢你


更新:

我发现react-infinite-grid无法支持react16.0.0 或更高版本。

与 Kotlin Wrap 没有关系。