Slate：如何在Editor完全呈现时找到

Question

我希望有一个页面可以呈现Slate编辑器，从API检索文档，然后在编辑器更新并完成重新渲染时打印窗口。如何确定编辑器何时重新渲染？

示例代码：

  componentDidMount() {
    $.get('/api/')
      .done((data) => {
        this.setState({ document: Value.fromJSON(data) });
        // workaround to try and make sure document is rendered
        // what can I do here instead??
        setTimeout(() => window.print(), 500);
      });
  }

  render() {
    const { document } = this.state;

    return (
        <Editor
          value={document}
          readOnly
          ...
        />
    );

我尝试在父组件中使用componentDidUpdate：

componentDidUpdate(prevProps, prevState) {
    window.print();
}

但是在编辑器完全渲染之前会触发该函数，因此文本不会显示在“打印”对话框中：

Answer 1

在呈现Editor组件的类中使用componentDidUpdate生命周期方法。

componentDidUpdate() {
    if(this.state.document !== prevState.document) }
        // Here you know that the Editor component has re-rendered
    }
}

正如我链接的文档中所述，componentDidUpdate方法在初始渲染时不会被触发。这不会成为您的用例的问题，因为您正在等待异步加载的数据。

Answer 2

您可以使用componentDidUpdate跟踪状态何时更新。当您更新this.state.document时，看起来会触发重新呈现Editor组件，因为它作为道具传递下来。除非Editor在呈现时提供回调，否则您必须执行setTimeout hack：

componentDidUpdate(prevProps, prevState) {
    if(this.state.document !== prevState.document) {
        setTimeout(() => window.print(), 500);
    }
}