Question

这是一个很奇怪的再现，不得不使用超时来破解它，但是它确实模仿了我遇到的问题。

1）React用div渲染abc123。 操作该字符串（添加4或其他内容）

2）第一次超时后，React会删除内容-在第二个计时器触发之前，立即在框中手动输入内容。。

3）在第二个计时器，React 确实使用render作为this.props.value运行null方法（请注意日志记录触发），但是div确实不会更新（自abc123删除后，它不会删除您键入的任何文本）。

我知道播放contenteditable的内容会阻止React对该内容进行管理（因此我禁止显示警告）。但是，为什么我在上面的步骤1中修改了文本后，组件仍能正确更新？此外，如果第二个计时器将value设置为其他文本，而不是null，则组件再次正确更新。

即使值是null，如何才能使该组件始终重置可编辑内容的内容？

Answer 1

由于虚拟dom未检测到任何差异而未在第二次超时时更新的原因。这将基于props：https://jsfiddle.net/mwqyub1v/35/设置innerHTML。

class App extends React.Component {

  componentDidMount() {
    this.node = React.findDOMNode(this);
  }

  componentDidUpdate() {
    this.node.innerHTML = this.props.value;
  }

  render() {

    console.log('value', this.props.value);

    return React.createElement('div', {
        contentEditable : true,
      suppressContentEditableWarning : true
    }, this.props.value);

  }

}

仅反应重新提交已修改的内容一次

1 个答案: