Рендер после получения реквизита

Question

Я не вижу правильной причины для рендеринга LitElement WebComponent до того, как будут доступны его реквизиты / атрибуты. Если шаблону нужна опора, вы вынуждены второй раз визуализировать компонент, после первого бесполезного. Хуже того, если ваш компонент выглядит так:

class MyComp extends LitElement
    static get properties() {
        return {
            myBigProp: {
                type: Object
        }
    render() {
        return html`<p> ${this.myBigProp.nestedProp}</p>`
}

, вы получите ошибку при доступе к nestedProp, когда myBigProp равно undefined. Есть ли clean способ избежать рендеринга дважды этого компонента?

Answer 1

Существует обратный вызов жизненного цикла shouldUpdate . Возвращайте false, пока не захотите визуализировать компонент.

shouldUpdate(changedProps) {
  return this.myBigProp != null;
}

Answer 2

Если вы уже можете установить свойства, вы можете просто определить их в конструкторе. Затем он должен быть доступен при первом рендеринге.

constructor() {
   super();
   this.myBigProp = {nestedProp:'nested value'}
} 

Однако, если вам придется ждать их, я обычно даю понять, что компонент загружается визуально с помощью свойства "initialized", а затем обрабатывает его в функция рендеринга.

render() {
   if (!this.initialized) {
      return html`<div class='loading-reserved-zone'></div>`;
   } else {
      return html`<p>${this.myBigProp.nestedProp}</p>`
   }
}

В противном случае «Дополнительный оператор цепочки» в августе 2020 года достигнет javascript, что может обработать ваш второй сценарий или вы можете технически использовать этот плагин babel , если Вы хотите использовать его раньше.