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

我想打破用户输入到内容可编辑容器中的文本,并用包裹在< 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将引发各种错误,例如：

Uncaught TypeError: Cannot read property ‘parentNode’ of undefined

和

Uncaught Error: Invariant Violation: findComponentRoot(…, .0.$2):
Unable to find element. This probably means the DOM was unexpectedly
mutated (e.g., by the browser), usually due to forgetting a
when using tables or nesting

or tag……

为什么会这样？
谢谢

解决方法:

不幸的是,现在contenteditable不适用于React生成的子代：

https://github.com/facebook/react/issues/1466

当前的一种解决方法是自己构建HTML或使用React.renderToStaticMarkup并使用React的危险地设置内部HTML,尽管这样做会失去一些React的好处.

标签：reactjs,contenteditable,javascript
来源： https://codeday.me/bug/20191121/2053769.html