Ace 编辑器清除反应渲染

Question

我有以下反应结构（我为此post简化了它）：

<div>
    <div>
        <div
            <AceEditor/>
        </div>
    </div>
    <div>
        <p/>
        <hr/>
        {items}
    </div>
</div>

AceEditor 是从 react-ace npm 包导入的，{items} 是一个大小不一的数组，由 this.state 中的数组创建。一切正常，除了一件事：每次由于 {items} 中的更改（由于 this.state 中数组的更改）而重新呈现此结构时，AceEditor 中的文本将被重置。没有触发 onChange 事件，我似乎无法追查问题的根源。

有人知道是什么原因导致的问题以及如何解决这个问题吗？

Answer 1

对状态的更改将导致渲染器重新显示 DOM，从而在更新状态时清除您的更改。

您很可能需要将 AceEditor 的状态存储在 state 中，以便在 DOM 重新呈现时重新显示。

function onChange(newValue) {
  // store this value in state!!
  this.setState({ newValue: newValue});
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    value={this.state.newValue}
    editorProps={{$blockScrolling: true}}
  />,
  document.getElementById('example')
);

Ace 编辑器清除反应渲染

Ace Editor clearing on react render

jsx

ace-editor

reactjs