如何在没有持续重排的情况下动态调整高度的文本区域?

Question

我目前正在为我的 React 文本区域组件做一些事情：

componentDidUpdate() {
let target = this.textBoxRef.current;
target.style.height = 'inherit';
target.style.height = `${target.scrollHeight + 1}px`; 
}

这有效，并允许文本区域在添加和删除换行符时动态增加和缩小高度。

问题是每次文本更改都会发生重排。这会导致应用程序中出现很多滞后。如果我按住文本区域中的键，则在附加字符时会出现延迟和滞后。

如果我删除target.style.height = 'inherit';线，滞后就会消失，所以我知道这是由这种不断的回流引起的。

我听说设置overflow-y: hidden可能会摆脱不断的回流，但就我而言，它并没有。

我唯一的另一个想法是在每次文本更改时扫描文本区域，以获取n字符数，并根据该计数设置高度。唯一的问题是它看起来很脆，冗长，并且是我想避免的每个文本更改的O(n(操作。

思潮？

编辑：好的，我最终只是在文本更改处理程序中计算n来预测高度。可内容编辑的div太有限了。也许我稍后会重新发布这个问题，因为我怀疑它是否会重新打开。

Answer 1

您可以改用可内容编辑的div：

<div name="someName" contenteditable="true">This text can be edited by the user.</div>