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

Question

所以我看到这个JSfiddle生成一个带有“textarea textarea - ghost”（非鬼textarea）作为类的div元素。我看到以下代码片段：

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

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

但这似乎只更新了实际textarea框的高度，类为“.textarea”。具有“textarea textarea - ghost”类的“ghost”元素的高度如何更新？关于React生命周期有什么我不理解的吗？

Answer 1

这里没有反应魔法。正如jsfiddle提到的： Uses a ghost div to measure height.因此未设定鬼影高度。高度由内容的高度隐式指定。

该程序的工作原理如下：

1. 离开ghost textarea的高度
2. 将ghost textarea的值设置为主textarea的值
3. 允许浏览器通过渲染来确定ghost textarea填充值的高度
4. 在JS / React中测量ghost textarea高度
5. 设置主要文字区域的高度

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

Answer 2

发生这样的事情......

1. ghost div有一个ref定义 -

   第67行：ref={(c) => this.ghost = c}

2. ghost div在渲染过程中使用textarea的值进行更新。

   第70行：{this.state.value}

   这会改变幽灵的高度。

3. 同时，在onKeyUp事件期间，setFilledTextareaHeight方法使用引用this.ghost这是ghost div的DOM元素来获取高度ghost div并将其设置为州内的height。

4. 重新渲染和presto！

因此，简而言之，ghost div根据在主文本区域中输入的值进行更改，然后将其高度应用于文本区域。