dangerouslySetInnerHtml在渲染期间不会更新

Question

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

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

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

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;

(有一点背景,我在提交保存后试图清除我的输入.清算无效,因此这个问题.)

Answer 1

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

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

示例: 当您键入"？"时,您可以在此处找到您的代码(我更改了一些代码以使其正常工作)进入div,ContentEditable组件内的文本应该变成一个空字符串(即''),它只能运行一次,第二次键入'？' 因为反应的innerHTML与你正在设置的反应将是相同的(即一个空字符串,所以它不会更新组件)将无法工作.

而在这里,我加了key={Date()}(这是为了告诉你,这项工作的最简单的方法,但它不是唯一关键词,每次它重新渲染设置的最佳方式),可编辑组件,现在你可以输入任意数量的'？' 它会起作用.