Пользовательские элементы рендеринга несколько раз - PullRequest
Новая
       23

Пользовательские элементы рендеринга несколько раз

0 голосов
/ 20 февраля 2020

У меня в настоящее время проблема с пользовательскими элементами, я создаю некоторые пользовательские элементы для go на веб-сайте электронной коммерции, и один из моих пользовательских элементов выполняет повторную визуализацию несколько раз. 

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);

}

Я впервые работаю с пользовательскими элементами, кто-нибудь сталкивался с этой проблемой раньше?

Спасибо

1 Ответ

0 голосов
/ 20 февраля 2020

Мне удалось заставить его работать, ConnectedCallback вызывался несколько раз. Я добавил в счетчик, чтобы он работал только один раз. 

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

    constructor(){
      super();
      this.count = 0
    }

    connectedCallback(){
      if(this.count === 0){
        this.count += 1
        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);};
...