React（Preact）渲染内容两次

Question

在可编辑的前置元素上，我运行只有在按下回车键时才执行 onKeyDown 脚本，以避免文本中不需要的 HTML 元素。

render({}, {content}) {
        console.log("render: "+content);
        return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p>
}

在handleKeyDown函数中，段落内容被改变，setState(content: newText)被调用，以便再次呈现内容。这导致新文本被写入两次。

当我键入 "hello world" 并在 "hello" 之后中断时，将导致 “你好
世界你好
世界

即使 handleKeyDown 和渲染函数记录了正确的字符串：
“你好
世界

我做错了什么？

Answer 1

使用contentEditable时，一般应使用dangerouslySetInnerHTML设置HTML内容。

  <div
    contentEditable
    dangerouslySetInnerHTML={{
      __html: value
    }}
  />

这里 working JSFiddle example 展示了如何做到这一点。

React (Preact) renders content twice