Question

所以我制作了一个组件，用于在我的应用中包含内容可编辑的组件。我从相信的一些要点中复制了它，然后编辑到我需要的东西。

代码如下。当我编辑它时，它会触发父节点上的更新，但是当我尝试在父节点中设置props.html时，它不会反映在UI中。此外，console.log显示this.props.html等于''空白字符串，但UI不更新，并维护最初在那里的文本。

我不明白这是怎么可能的...... dangerouslySetInnerHtml = {__ html：''}应该让它反映一个空字符串...感觉它应该是不可能显示旧文本

name

（有点背景，我在提交保存后我试图清除我的输入。清算无效，因此这个问题。）

Answer 1

我使用contentEditable和shouldComponentUpdate遇到了一个非常类似的问题，使用dangerouslySetInnerHTML函数（或prop）将innerHTML重置为相同的先前值时看起来有一个错误（我认为即使您不使用它而插入代码也不起作用）...我怀疑（这只是一个想法）React将通过dangerouslySetInnerHTML设置的最后一个值与您尝试发送的新值进行比较并决定不更新组件，因为它是相同的（即使真正的innerHtml由于用户交互而发生了变化，因为这些交互不会触发React上的任何状态或道具更新）。

解决方案：我发现最简单的解决方案是每次需要重新渲染时使用不同的密钥。例如使用key={Date()}。

示例： Here当您输入'？'时，您可以找到您的代码（我更改了部分代码以使其正常工作）进入div，ContentEditable组件内的文本应该变成一个空字符串（即''），它只能运行一次，第二次键入'？'因为反应的innerHTML与您正在设置的反应相同（即空字符串，因此它不会更新组件），因此无效。

here，我添加了key={Date()}（这是向您展示此工作的最简单方法，但它不是每次重新渲染时设置唯一键的最佳方式）到可编辑组件，现在你可以键入任意数量的'？'它会起作用。

Answer 2

我发现了另一个可能比生成随机密钥更好的解决方案。将密钥专门放在调用#dangerouslySetInnerHtml的div上，而不仅仅放在组件本身上

<div class='wrapper'>    
<div key={this.props.thing.id} dangerouslySetInnerHtml={this.props.thing.content} />
</div>

Answer 3

我遇到了同样的问题（React 16）并使用了MLR建议的方法，其中包括删除dangerouslySetInnerHTML并使用componentDidMount()代替初始渲染和{{1}对于任何后续渲染。

解决方案，适用于React 16：https://codepen.io/mlbrgl/pen/PQdLgb

这些钩子会执行相同的更新，直接从道具中更新componentDidUpdate()：

innerHTML

这使得（至少对我来说）更清楚地看到了真正发生的事情，而没有componentDidMount() { this.updateInnerHTMLFromProps(); } componentDidUpdate() { this.updateInnerHTMLFromProps(); } updateInnerHTMLFromProps() { this.refEl.innerHTML = this.props.html; }在所有情况下保持DOM同步的错误期望，如Mike Woodcock所示这里https://stackoverflow.com/a/38548616/9408759。

要查看此处列出的问题和解决方案的完整视图，请查看https://codepen.io/mlbrgl/pen/QQVMRP。

Answer 4

我的（非常简单）React（版本16）应用：它有一个contentEditable <div>。它会在提交按钮点击进度后成功重新呈现此<div>。我使用dangerouslySetInnerHtml代替ref={el => this.myRefElem = el}而不是componentWillUpdate(nextProps) { this.myRefElem.innerHTML = nextProps.myInputText; }对我而言，nextProps对于重新呈现的正确值非常重要。查看我的应用程序的项目文件，以查看其余所需的代码。 CLICK-HERE查看我的React应用。它有一个按钮来下载其（开发模式）项目文件。它（基本上）只有一个index.js文件。 - - - 这个应用程序是由mlbrgl发起的，他问我替代技术。

dangerouslySetInnerHtml在渲染期间不会更新

4 个答案: