问dangerouslySetInnerHtml在渲染期间不会更新
EN

Stack Overflow用户

提问于 2015-05-14 16:32:36

回答 5查看 7.5K关注 0票数 10

因此，我制作了一个组件，用于在我的应用程序中包含内容可编辑的组件。我抄袭了一些我相信的要点，然后编辑成我需要的内容。

代码如下。当我编辑它时，它会触发父对象上的更新，但当我试图在父对象中设置props.html时，它不会在UI中反映出来。此外，console.log显示this.props.html等于空字符串，但UI不更新，并保留原来在那里的文本。

我不明白这怎么可能..。dangerouslySetInnerHtml = {__html：''}应该可以使UI反映空字符串...感觉它应该不可能显示旧的文本。

var React = require('react');

var ContentEditable = React.createClass({
    render: function(){
        //TODO: find where html=undefined and fix it! So I can remove this? Maybe I should keep this safety.
        var html = this.props.html || '';
        console.log('content editable render, html: ', this.props.html);
        return <div id="contenteditable"
            onInput={this.emitChange} 
            onBlur={this.emitChange}
            contentEditable
            dangerouslySetInnerHTML={{__html: html}}></div>;
    },
    shouldComponentUpdate: function(nextProps){
        return nextProps.html !== this.getDOMNode().innerHTML;
    },

    emitChange: function(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({
                target: {
                    value: html
                }
            });
        }
        this.lastHtml = html;
    }
});

module.exports = ContentEditable;

(一个小背景，我正在尝试在提交要保存的输入后将其清除。清算不起作用，因此出现这个问题。)

reactjs

人脸识别特惠活动

精准实时的人脸检测、分析、识别等服务，在线、离线满足多样需求，可应用于智慧零售、智慧社区、在线娱乐等多种应用场景

回答 5

Stack Overflow用户

发布于 2016-07-24 04:00:22

我在使用contentEditable和shouldComponentUpdate时遇到了一个非常类似的问题，当使用dangerouslySetInnerHTML函数(或prop)将innerHTML重置为相同的前值时，似乎存在一个错误(我认为即使您不使用它来插入代码，它也不起作用)……我怀疑(这只是一个想法) React将通过dangerouslySetInnerHTML设置的最后一个值与您试图发送的新值进行比较，并决定不更新组件，因为它是相同的(即使实际的innerHtml因用户交互而更改，因为这些交互不会在React上触发任何状态或道具更新)。

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

示例： Here当您键入'?‘时，您可以找到您的代码(我更改了其中的一些代码以使其正常工作)。在div中，ContentEditable组件中的文本应该变成一个空字符串(即'')，它只工作一次，第二次键入'?‘。将不会工作，因为react的innerHTML将与您设置的相同(即空字符串，因此它不会更新组件)。

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

票数 10

Stack Overflow用户

发布于 2017-05-04 18:45:19

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

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

票数 2

Stack Overflow用户

发布于 2018-02-25 13:48:57

我遇到了同样的问题(React 16)，并使用了MLR建议的一种方法，即删除dangerouslySetInnerHTML，并使用componentDidMount()代替初始渲染，使用componentDidUpdate()代替任何后续渲染。

Solution here，适用于React 16：https://codepen.io/mlbrgl/pen/PQdLgb

这些钩子将执行相同的更新，直接从props更新innerHTML：

componentDidMount() {
  this.updateInnerHTMLFromProps();
}

componentDidUpdate() {
  this.updateInnerHTMLFromProps();
}

updateInnerHTMLFromProps() {
  this.refEl.innerHTML = this.props.html;
}