自定义元素多次渲染

由 发布于

我目前在使用自定义元素时遇到问题，我正在构建一些自定义内容以在电子商务网站上发布，而我的自定义元素之一是多次重新呈现自身。

window.initDealBadge = function(customer) {
class DealBadgeCustomElement extends HTMLElement {

    constructor(){
      super();
    }

    connectedCallback(){
      console.log("ELEMENT ADDED TO PAGE")
      const mountPoint = document.createElement('span');

      this.appendChild(mountPoint);

      const attrs = [].reduce.call(this.attributes, (memo, attr) => {
            memo[attr.name] = attr.value;
            return memo;
        }, {});
        const data = Object.assign({}, attrs);

      ReactDOM.render(<DealBadge customer={customer} id={data.id}/>, mountPoint);
    }
  }
customElements.define('deal-badge', DealBadgeCustomElement);

}

这是我第一次使用Custom元素，以前有人遇到过此问题吗？

谢谢