这个React元素的高度是如何更新的？

Question

所以我看到了这个JSfiddle，它生成一个带有"textarea textarea--ghost“(非虚幻文本区域)的div元素作为一个类。我看到了以下代码片段：

setFilledTextareaHeight() {
    if (this.mounted) {
      const element = this.ghost;

      this.setState({
        height: element.clientHeight,
      });
    }
  }

但这似乎只更新了带有".textarea“类的实际文本区域框的高度。带有"textarea textarea--ghost“类的"ghost”元素的高度是如何更新的？关于React生命周期有什么我不理解的地方吗？

Answer 1

这里没有反应魔法。正如jsfiddle提到的：Uses a ghost div to measure height.，所以鬼影的高度是测量的，而不是设置的。高度由内容的高度隐式指定。

该过程的工作原理如下：

1. 将虚象文本区的高度设置为主文本区的值
2. 将虚象文本区的值设置为主文本区的值
3. 允许浏览器通过渲染JS中的虚象文本区来填充该值
4. 测量JS中的虚象文本区高度
5. 设置主文本区的高度

这个复杂的过程主要用于高度CSS转换，因为高度上的CSS转换对100% old height to 100% new height不起作用，因此必须给出明确的像素单位才能使转换工作。

Answer 2

事情是这样发生的..。

1. ghost div定义了一个ref -

第67行:在呈现过程中，ref={(c) => this.ghost = c}

• The ghost div使用文本区域的值进行更新。

第70行：{this.state.value}

这会更改重影的高度。

• 同时，在onKeyUp事件期间，setFilledTextareaHeight方法使用引用this.ghost获取重影div的高度，并在state.

• Re-render中将其设置为height并将其设置为presto!

因此，简而言之，根据在主文本区域中输入的值，重影div会发生变化，然后将其高度应用于文本区域。