React Grid Layout - 在第一次 Init 后更新 Tinymce 编辑器高度

Question

我有一个渲染 tinymce 编辑器实例的 React 组件。目标是在初始化后动态调整编辑器的高度。我正在使用“React Grid Layout”包来调整组件的大小。

2 个问题： 1、react组件中编辑器父级的高度变化在哪里可以查到。在哪个生命周期？ 2.应该在哪里更新编辑器的高度配置？在 init 方法中？

render(){
  <div id="wrapper">
      <textArea id="tinymceSelector"></textArea>
  </div>
}

我的部分解决方案是像这样确定父母的身高：

let parentHeight = document.getElementById('wrapper').clientHeight 

如果在使用 React Grid Layout 调整大小之前和之后有任何差异，则此父高度将显示大小差异。

在我找到高度并确定高度变化之后（但在哪里？这是我的问题 1）。我会更新 tinymce 配置：

editorinstance.theme.resizeTo (width, height);

谢谢！！

Answer 1

实施的解决方案是：

在第一次渲染时，我初始化 tinymce 编辑器如下：

1. 我根据#wrapper 高度计算应呈现编辑器的初始高度。

2. 我在一个名为 this._wrapperHeight 的变量中设置了 #wrapper 的高度。

3. 我没有将编辑器的高度设置为与#wrapper 相同的高度，而是将其调整为仅为总值的70%。这可以防止滚动条。 （我必须说，我想要一个不同的实现，因为当我将它调整为太小时，滚动条是持久的）

   this._editorHeight = this._wrapperHeight * 0.7;

4. 在初始化期间，我还必须在编辑器的配置中包含插件autoresize，并设置autoresize_min_height=this._editorHeight

初始化完成后，动态更新高度如下：

1. 在componentWillReceiveProps 中我再次计算#wrapper 的高度。

2. 评估旧包装器与新包装器的高度

3. 如果不同则：设置新高度tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);