反应网格布局 - 首次初始化后更新Tinymce编辑器高度

Question

我有一个React组件，它呈现了一个tinymce编辑器的实例。目标是在初始化后动态调整编辑器的高度。我正在使用＆＃34; React Grid Layout＆＃34;用于调整组件大小的包。

2个问题： 1.我在哪里可以查看反应组件中编辑器父级的高度变化。在哪个生命周期？ 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. 我在名为#wrapper的变量中设置了this._wrapperHeight的高度。

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);