使用 React 更新 contenteditable 容器中的内容

Question

我想打破用户输入到内容可编辑容器中的文本，并将容器的内容替换为包裹在 <span> 元素中的相同文本。

这是我的渲染方法：

render: function() {
    var children = [],
        index = 0;

    this.state.tokens.forEach(function(token) {
        children.push(<span key={index++}>{token}</span>, <span key={index++}> </span>);
    });

    return <div 
        ref="input"
        className="input" 
        contentEditable="true" 
        onKeyPress={this.keyPress}
    >{children}</div>;
}

(entire example in JSFiddle)

发生的情况是，在用户输入的间隔（600 毫秒）之后，当状态发生变化并呈现组件时，会添加子项，但 React 出于某种原因添加了容器中的原始文本，所以它有点像复制文本。

另一件事是，如果用户选择文本并将其删除，在下一次更新中，React 将抛出各种错误，例如：

未捕获的类型错误：无法读取未定义的属性“parentNode”

和

未捕获的错误：不变违规：findComponentRoot(..., .0.$2): 找不到元素。这可能意味着 DOM 出乎意料 突变（例如，由浏览器），通常是由于忘记了 使用表格或嵌套时

或标签......

对为什么会发生这种情况有任何想法吗？
谢谢

Answer 1

不幸的是 contenteditable 现在不能与 React 生成的孩子一起正常工作：Uncaught Error when using ContentEditable="true" within Chrome。

当前的一种解决方法是自己构建 HTML 或使用 React.renderToStaticMarkup 并使用 React 的 dangerouslySetInnerHTML，尽管这样做会失去一些 React 的好处。