<p>React-ace в контейнере с изменяемым размером</p>

@MartinHaeusler благодарит за проблему. Я работаю над этим прямо сейчас. должен быть в 4.4.0 и будет в 5.0.0 когда он появится

@MartinHaeusler, это сейчас в 4.4.0 Спасибо

Спасибо за очень быстрый ответ! Я только что обновил свой package.json, чтобы использовать 4.4.0 и он работает очень хорошо, спасибо!

@MartinHaeusler не могли бы вы поделиться ссылкой на созданное вами решение?

@dmigo : Я пробовал использовать для работы реакцию-меру . Однако это сработало только в некоторых случаях, а не во всех. Всегда оставались какие-то странные угловые случаи, когда редактор вел себя не так, как задумано. В конце концов, я перешел с Ace на CodeMirror по этой причине. У меня также были некоторые проблемы с изменением размеров, и мне пришлось сделать несколько довольно уродливых хаков, но теперь это работает. Извините, вскоре после этого я отказался от прототипа редактора react-ace с изменяемым размером. Но в любом случае это никогда не работало должным образом, как задумано.

@securingsincity
Пытаясь реализовать что-то похожее на то, что сделал @MartinHaeusler , я обнаружил интересное поведение react-ace . Казалось, что resize() не происходит должным образом.
После некоторого расследования выяснилось, что this.editor.resize() вызывается на componentWillReceiveProps которое происходит перед render .
Было бы разумнее вызвать this.editor.resize() во время componentDidUpdate , после того, как render произошло и ace-editor получил новые значения для height и width .
Если мы с этим согласимся, то я буду рад исправить это для вас (вместе с № 212). Что бы вы сказали?

@dmigo, это здорово! Если мы думаем, что это может решить проблемы, давайте сделаем это

@dmigo Хороший улов! Это могло быть проблемой и для меня.

Я готов!

Я обновился до 5.1.2 и вызвал AceEditor с реквизитом:

mode: 'json',
theme: 'chrome',
readOnly: true

Есть ли что-нибудь, что мне нужно добавить, чтобы изменить размер контейнера?

Есть ли что-нибудь, что мне нужно добавить, чтобы изменить размер контейнера?

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

1. разрешить пользователю активно изменять размер контейнера с помощью свойства CSS resize: vertical (т. е. позволять пользователю перетаскивать правый нижний угол для изменения размера).
2. автоматически изменять размер контейнера в зависимости от количества введенных пользователем строк. При высоте по умолчанию 500 пикселей, если пользователь вводит> 27 строк, редактор остается той же высоты, при этом контейнер можно прокручивать, чтобы добавить дополнительное пространство. Я хотел бы, чтобы контейнер увеличивался (или уменьшался до минимальной высоты) на основе введенных строк.

Кто-нибудь знает, как автоматически изменять размер контейнера на основе пользовательского управления?

Мне удалось использовать детектор изменения размера

import AceEditor from 'react-ace'
import ReactResizeDetector from 'react-resize-detector'

export default class myComponent extends Component {

  constructor (props) {
    super(props)
    this.state = {
      editorHeight: 400,
      editorWidth: "auto"
    }
    this.onResize = this.onResize.bind(this)
  }


  onResize (w, h) {
    this.setState({
      editorHeight: h,
      editorWidth: w
    })
  }

  render () {
    <div className="resizable">
     <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
     <AceEditor
       height={this.state.editorHeight}
       width={this.state.editorWidth}
     />
    </div>
  }
}

CSS класса resizable

.resizable {
    overflow: auto;
    resize: both;
    height: 400px;
    width: auto;
}

вот чистое решение css, используя resize: both в редакторе div

<AceEditor
  onLoad={editorInstance => {
    editorInstance.container.style.resize = "both";
    // mouseup = css resize end
    document.addEventListener("mouseup", e => (
      editorInstance.resize()
    ));
  }}
/>

обратная сторона: при увеличении размера содержимое редактора скрывается

вот демонстрационная скрипка с vanilla js

Спасибо @milahu, ваше решение отлично сработало для моего

Спасибо @milahu, ваше решение очень полезно. Кроме того, лучше будет использовать событие window.onresize.