时间戳

首页 > 解决方案 > 如何使用 react-monaco-editor 实现 Monaco 编辑器的动态调整大小？

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

问题描述

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

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>
       ...
      </>
    );
  }
}

我想根据窗口大小更改widthand 。height我怎样才能做到这一点？

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

感谢您的任何指示。

标签： javascriptreactjstypescriptmonaco-editor

解决方案

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

推荐阅读