摩纳哥编辑器对用户调整大小做出反应（Windows 样式调整大小）

Question

我正在使用 monaco-editor，react 版本，有这段代码

  <Editor
                height={"100%"}
                width={1200}
                onChange={handleUserQueryChange}
                beforeMount={handleEditorBeforeMount}
                onMount={handleEditorDidMount}
                options={{
                  minimap: {
                    enabled: false,
                  },
                  scrollBeyondLastLine: false,
                  lineNumbers: 'off',
                  glyphMargin: false,
                  folding: false,
                  lineDecorationsWidth: 0,
                  lineNumbersMinChars: 0,
                  wordWrap: 'off',
                  automaticLayout: true
                }}
              />

我想更改大小编辑器，就像您在普通操作系统（windows/linux）中打开的窗口一样，并将下面的内容向下移动。

我添加的 automaticaLayout 似乎不起作用（我认为它与响应有关）。

有任何想法吗？

Answer 1

我最终使用库re-resizable ，使用这段代码并且它正在工作：

  const [height, setHeight] = useState(10)

  <Resizable size={{
              width: 1200,
              height: height,
            }}
            onResizeStop={(e, direction, ref, d) => {
              setHeight(height + d.height)
            }}
            >
             
               <Editor
                height={height}
                width={1200}
                options={{
                  minimap: {
                    enabled: false,
                  },
                  scrollBeyondLastLine: false,
                  lineNumbers: 'off',
                  glyphMargin: false,
                  folding: false,
                  lineDecorationsWidth: 0,
                  lineNumbersMinChars: 0,
                  wordWrap: 'off',
                  automaticLayout: true
                }}
              />
            </Resizable>

注意：在此示例中仅更改高度，但您也可以根据需要添加宽度