从resizeObserver调用layout（）不起作用，但从窗口调用。

Question

在我的React应用程序中，给出编辑器是当前在应用程序中打开的 Monaco.editor.create（）创建的所有编辑器的数组，它是我有这样的：

const resizeObserver = useRef(new ResizeObserver(entries => {
    console.log('entries = ', entries);
    for(let entry of entries) {
        console.log('target = ', entry.target);
        const editor = getEditor(entry.target.id);
        console.log('editor = ', editor);
        editor.layout({} as monaco.editor.IDimension);
    }
  }));

它可以正确发射，但编辑器没有调整大小。但是，假设我只调整当前编辑器的大小：

window.onresize = () => {
  const editor = editors[0];
  editor.layout({} as monaco.editor.IDimension);
}

这很好。我想念什么？

Answer 1

在React应用程序中，当您在页面上只有一个可见编辑器时，仅使用一个编辑器。在看不到时，请勿将编辑器实例存储在某个地方进行操作。而是使用 componentDidmount 在（仅）编辑器实例中加载一个新模型，并将编辑器的状态保存在 componentupdated 中。

对于调整大小操作，请在编辑器组件中使用“调整大小”观察者。将其设置在其强制器中：

        if (typeof ResizeObserver !== "undefined") {
            this.resizeObserver = new ResizeObserver(this.handleEditorResize);
        }

并处理该编辑器组件中的调整大小：

    private handleEditorResize = (entries: readonly ResizeObserverEntry[]): void => {
        if (entries.length > 0) {
            const rect = entries[0].contentRect;
            this.editor?.layout({ width: rect.width, height: rect.height });
        }
    };

当组件被卸载时，请不要忘记清理：

    public componentWillUnmount(): void {
        ...
        this.resizeObserver?.unobserve(this.hostRef.current as Element);
    }