如何使react-monaco-edator做出响应?

问题描述 投票:0回答:1

我正在使用react-monaco-editor,但无法使其具有响应能力。组件中的高度和宽度固定。如果更改屏幕尺寸,则宽度保持固定。

    <MonacoEditor
      width="1200"
      height="600"
      language="typescript"
      theme="vs-dark"
      defaultValue="//type your code here"
      value={code}
      options={options}
      onChange={this.onChange}
      editorDidMount={this.editorDidMount}
      className='editor1'
    />

如果我从组件上除去宽度和高度,则组件会减少。我尝试用flex覆盖组件className。但这似乎效果不佳。

.react-monaco-editor-container {
   flex: 2;

}

您可以通过CSS帮助我做出响应吗?

html css reactjs monaco-editor
1个回答
0
投票

您可以添加一个调整大小的处理程序,以便找出编辑器容器的可用空间,并将其立即传递给您的Monaco Editor。

还有各种不同的库可以为您提供帮助:https://www.npmjs.com/package/react-resize-detector

在这里,您可以使用上面的库找到一个沙箱示例:https://codesandbox.io/s/vibrant-goldwasser-3d8j7?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import { withResizeDetector } from "react-resize-detector";

const Editor = ({ width, height }) => (
  <div
    style={{
      background: "grey",
      height: height,
      width: width
    }}
  >
    Editor container with {width} x {height}
  </div>
);

export default withResizeDetector(Editor);

© www.soinside.com 2019 - 2024. All rights reserved.