Question

我有以下反应结构（我为这篇文章简化了它）：

<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的状态存储在状态中，以便在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编辑器清除反应渲染

1 个答案: