在我更改大小之前，在 Resizable 中编写的组件不会显示

Question

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>

附加问题：如何让最大行取决于 window 大小。

版本：

"re-resizable": "6.2.0" "react-ace": "8.0.0"

Answer 1

编辑器尺寸改变时需要调用editor.resizehttps://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"));

最大行选项的要点是根据编辑器内的文本设置大小，如果您希望编辑器大小取决于 window 大小，请设置使用高度

在我更改大小之前，在 Resizable 中编写的组件不会显示

component written with in the Resizable is not getting displayed until I change the size

javascript

reactjs

ace-editor

resizable

react-ace