我正在使用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帮助我做出响应吗?
您可以添加一个调整大小的处理程序,以便找出编辑器容器的可用空间,并将其立即传递给您的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);