如何使用react-monaco-editor实现Monaco编辑器的动态大小调整？

问题描述

我正在使用React应用程序中的react-monaco-editor库查看文档。

特定的height和width的代码如下：

import MonacoEditor from 'react-monaco-editor';


class DocView extends React.Component<any,any> {
  constructor(props){
    super(props);
  }

  onChange(newValue,e) {
    console.log('onChange',newValue,e);
  }

  public render(): JSX.Element {
    const {t} = this.props;
    const options = {
      selectOnLineNumbers: true,readOnly: true,};
    
    return (
      <>
      ...
      <div>
        <MonacoEditor
          width={900}
          height={420}
          language="yaml"
          theme="vs-dark"
          defaultValue=''
          options={options}
          value={this.props.code}
          onChange={this.onChange}
        />
      </div>
       ...
      </>
    );
  }
}

我想根据窗口大小更改width和height。我该如何实现？

我看到了与monaco-editor相关的多个答案，但没有一个明确地使用react-monaco-editor。

感谢任何指针。

解决方法

width和height属性支持所有HTML参数值作为字符串。它们默认为100%来填充整个可用空间。这样，您可以将编辑器包装到一个div中，为该div设置特定的动态大小，或者让它参与网格或框的布局。