Question

我正在尝试在应用程序中使用自定义元素，但是升级到当前版本的lit-element后，我似乎找不到 _didRender 的替换功能。我尝试了 firstUpdated 和 connectedCallback 都没有成功。我该怎么办。代码会渲染，但是渲染并修改ajax调用后，我希望渲染会更新，但不会更新

import {LitElement, html} from 'lit-element';
import '@material/mwc-formfield/mwc-formfield.js';
import '@material/mwc-checkbox/mwc-checkbox.js'
import '@polymer/iron-ajax/iron-ajax.js';

class FhirActiveStatus extends LitElement{
    static get properties() {
        return {
            /**activeStatus is used to show active status of person true or false. Use this property to show/hide. Default: true */
            activeStatus: {type:Boolean},
            /**url is used to make AJAX call to FHIR resource. Default: null */
            url: {type:String},
            /**value is used to take the input value of each field*/
            value: {type:Boolean}
        }
    }

    /**default value of properties set in constructor*/
    constructor() {
        super();
        this.activeStatus = 'true';
        this.value = false;
    }


    /**_didRender() was used here after the ajax call had been made*/
    async firstUpdated() {
        this.shadowRoot.getElementById('ajax').addEventListener('iron-ajax-response', function (e) {
            var active = this.parentNode.host;
            if (e.detail.response.active) {
                active.shadowRoot.querySelector('.activeState').checked = true;

            }
            else if (!e.detail.response.active) {
                active.shadowRoot.querySelector('.activeState').checked = false;
            }
            else {
                this.parentNode.removeChild(this.parentNode.querySelector('#activeDiv'));
            }
        });
    }

    render() {
        return html`
       <div id="activeDiv">
       ${this.activeStatus !== 'false' ? html`<mwc-formfield class="activeStatus" alignEnd label="ACTIVE STATUS:">
         <mwc-checkbox id="active" checked="${this.value}" class="activeState" @click="${e => this.value = e.target.value}"></mwc-checkbox>
         </mwc-formfield>` : ''}
       </div>
       <iron-ajax  auto id="ajax" bubbles auto handle-as="json" url="${this.url}"></iron-ajax>
    `;
    }
}

window.customElements.define('fhir-active-status', FhirActiveStatus);

Answer 1

看看LitElement的生命周期https://lit-element.polymer-project.org/guide/lifecycle

我相信

_didRender（）现在是 updated（）

Answer 2

如果您想通过回调样式代码编写异步/等待样式代码，则还可以依靠await this.updateComplete;。

用lit-element替换_didRender是什么

2 个答案: