如何使用 react-monaco-editor 實現 Monaco 編輯器的動態大小調整？

Question

我正在使用react-monaco-editor庫在 react 應用程序中查看文檔。

特定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 。

感謝您的指點。

Answer 1

width和height屬性支持所有 HTML 參數值作為字符串。 它們默認為100%以填充整個可用空間。 有了它，您可以將編輯器包裝到一個 div 中，您可以為其設置特定的動態大小或讓它參與網格或框布局。