bounty还有2天到期。此问题的答案有资格获得+50声望奖励。Sivanesh S正在寻找一个答案从一个有信誉的来源。
在Google Docs中,如果您创建文档。你将从第一页开始写。如果页面内容已满,则自动创建第2页,其余内容转到第2页,依此类推。如果您从第1页删除了一些行,则第2页的内容(如果有的话)将被移动到第1页的底部。
因此,在我的场景中,我有一些表示组件(大约10个),它们由一个表单填充。考虑左窗格有一个表单,更新它们会在右窗格上显示类似于文档的UI的实时预览。
我尝试在react应用程序中使用一些方法(如insertBefore
)直接操作DOM。我读到直接在React应用程序上进行DOM操作容易出错,不建议这样做。是否有其他模式或方法来实现此用例?
2条答案
按热度按时间yeotifhr1#
55ooxyrt2#
我想说的是,唯一能解决你的问题的方法是用
useLayoutEffect
来测量内容的大小,然后将所说的内容“分割”成页面。(This是因为我假设你不知道列表中每个项目的大小-如果你知道的话会更简单!).
我会从一个
useComponentSize
钩子开始,它看起来像这样:注意:我的实现是相当'基本'的;你可能会想要useTransition或其他类型的反跳效果,这样你的UI就不会慢到爬行
使用这个钩子,子节点可以在它的高度改变时通知父节点。下面是一个例子:
因此,您需要做的“所有”就是创建一个父组件,跟踪它的所有
Comp
子组件的高度。下面是一些(低效的)伪代码,可以帮助你理解:
我将重复我在这里写的实现是非常基本和低效的;当页面大于最大大小时的逻辑也是不充分的[1]
希望它能帮你找到正确的方向。
[1]你必须从数组中弹出项目,直到它低于最大高度。我保持简单是为了可读性,因为我不知道你的特定用例,