javascript - React Grid Layout - 在第一次初始化后更新 Tinymce Editor 高度

Question

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

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

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

我的部分解决方案是像这样确定 parent 的高度:

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