Javascript 在更改大小之前，在可调整大小中使用写入的组件不会显示

除非我不更改组件的大小（可调整大小），否则不会显示AceEditor

如果我添加任何其他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>

onBlur（id，event.target.value））}
onFocus={onFocus&&（event=>onFocus（id，event.target.value））}
onChange={this.\u onChange}
wrapEnabled={true}
showPrintMargin={true}
maxLines={40}
minLines={8}
highlightActiveLine={true}
设置选项={{
enableBasicAutocompletion:正确，
enableLiveAutocompletion:true，
enableSnippets:false，
showlinenumber：正确，
tabSize:2，
}}
/>

额外问题：如何根据窗口大小获得最大线

版本：

“可重新调整大小”：“6.2.0”

---

“react ace”：“8.0.0”

您需要调用

编辑器。当编辑器的大小更改时，请调整其大小

从“React”导入React；
从“react dom”导入{render}；
从“可重新调整大小”导入{resizeable}；
导入“ace构建”；
从“反应ace”导入AceEditor；
//导入“ace生成/网页包解析程序”
常量样式={
边框：“实心1px#ddd”，
背景：“f0”
};
常量应用=（）=>{
变量编辑器组件；
返回(
{
if（editorComponent）editorComponent.editor.resize（）；
}}
>
（editorComponent=el）}
宽度=“100%”
高度=“100%”
只读={false}
wrapEnabled={true}
showPrintMargin={true}
highlightActiveLine={true}
设置选项={{
enableBasicAutocompletion:正确，
enableLiveAutocompletion:true，
enableSnippets:false，
showlinenumber：正确，
tabSize:2
}}
/>
);
};
render（，document.getElementById（“根”））；

“最大行点”选项用于根据编辑器内的文本设置大小，如果希望编辑器大小取决于窗口大小，请设置“使用高度”

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"));