Question

我有一个简单渲染html的组件（在这个实例中使用dangerouslySetHtml），在渲染内容之后，我将一个eventlisteners添加到一些具有特定类的元素中，以实现“点击复制”功能。我在componentDidMount中执行此操作，但在此阶段我无法看到预期的结果。我在componentDidUpdate中应用相同的逻辑，它就像一个魅力。

知道为什么会发生这种情况？

==== Component ====
  componentDidMount() {
    clipboard(".test");
  }

  componentDidUpdate() {
    clipboard(".test");
  }

  render() {
    var props = this.props,
        config = props.config;

        return (
          <section className="componentName" datacomponent="componentName"}>
            <div className="text-1 emphasis-font-web-safe">
              <DangerouslySetInnerHtml text={config.get('text1')} />
            </div>
          </section>
        );
      }
    }

UpdatCopmponentView是一个添加事件监听器的简单函数：

function clipboard(selector) {
    var elementsToBeCopied = document.querySelectorAll(selector);

    _.forEach(elementsToBeCopied, function (elementToBeCopied) {
      elementToBeCopied.className += ' tooltip';

        elementToBeCopied.addEventListener('click',function(){
            copyText(this);
        } ,false);
    });
}

Answer 1

在render()或render()的{{1}}中设置一个断点，是否会触发两次？在DangerouslySetInnerHtml之后调用render()时，将删除附加的DOM事件，并且不再调用componentDidMount。这可以解释您的问题以及它与componentDidMount

一起使用的原因

React - 在ComponentDidMount中应用的逻辑被撤消

1 个答案: