Компонент, записанный в Resizable, не отображается, пока я не изменю размер

Question

AceEditor не отображается, пока и до тех пор, пока я не изменю размер компонента (Resizable)

Если я добавлю любой другой элемент HTML, например

Есть ли способ сделать Ace Редактор можно изменять без какой-либо библиотеки.

<Resizable
    defaultSize={{
        width: 'auto',
        height: 'auto',
    }}
    className="resizable-component"
>
    <AceEditor
        width="auto"
        height="100%"
        mode="html"
        theme="monokai"
        readOnly={false}
        focus={autofocus}
        onBlur={onBlur && (event => onBlur(id, event.target.value))}
        onFocus={onFocus && (event => onFocus(id, event.target.value))}
        onChange={this._onChange}
        wrapEnabled={true}
        showPrintMargin={true}
        maxLines={40}
        minLines={8}
        highlightActiveLine={true}
        setOptions={{
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: false,
            showLineNumbers: true,
            tabSize: 2,
        }}
    />
</Resizable>

Дополнительный вопрос: Как я могу получить максимальную строку, чтобы зависеть от размера окна.

Версия:

"с изменяемым размером": "6.2.0", "ace-ace": "8.0.0"

Answer 1

Вам нужно вызвать editor.resize при изменении размера редактора https://codesandbox.io/s/festive-wildflower-8trs0

import React from "react";
import { render } from "react-dom";
import { Resizable } from "re-resizable";

import "ace-builds";

import AceEditor from "react-ace";
//import "ace-builds/webpack-resolver"

const style = {
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

const App = () => {
  var editorComponent;
  return (
    <Resizable
      style={style}
      defaultSize={{
        width: "auto",
        height: 200
      }}
      onResizeStop={() => {
        if (editorComponent) editorComponent.editor.resize();
      }}
    >
      <AceEditor
        ref={el => (editorComponent = el)}
        width="100%"
        height="100%"
        readOnly={false}
        wrapEnabled={true}
        showPrintMargin={true}
        highlightActiveLine={true}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: false,
          showLineNumbers: true,
          tabSize: 2
        }}
      />
    </Resizable>
  );
};

render(<App />, document.getElementById("root"));

точка параметра max line - установить размер на основе текста внутри редактор, если вы хотите, чтобы размер редактора зависел от размера окна, установите значение use height