如何使用 TypeScript 有条件地渲染 LitElement？答案

【问题标题】：How can I conditionally render LitElement with TypeScript?如何使用 TypeScript 有条件地渲染 LitElement？
【发布时间】：2021-12-17 09:57:20
【问题描述】：

所以我正在映射一组对象，并希望在选择单选按钮时显示在页面上。例如，如果数组中有两个对象，则将有两个单选按钮。如果你按下radio1，它应该呈现form1。如果按radio2，它应该隐藏form1并显示form2。

我创建了一个名为 formIndex 的属性来跟踪正在按下哪个按钮，这样我就知道要调用哪个表单，但我在实现时遇到了麻烦。

当前行为：在页面加载时，两个无线电都出现，但尚未呈现数据。当我按下radio1 时，它同时显示form1 和form2。当我按下radio2时，它同时显示form1和form2。

我在 TypeScript 文件中使用 LitElement。

这是我创建的属性。由于我从 0 开始映射数组，因此我将此属性初始化为 -1：

@state()
formIndex: number = -1;

这里是我渲染表单的地方：

protected renderMultipleForms(formConfig: any): TemplateResult {
        return html`
            ${formConfig?.formHeading ? html`<h3>${formConfig.formHeading}</h3>` : ''}
                ${formConfig.forms?.map((data: any) => html`
                    <!-- <adc-radio-group>
                        <adc-radio-button id="radioBtn" label=${data.label} @click="${this.handleClick}"></adc-radio-button>
                    </adc-radio-group> -->
                    <!-- RADIOS  -->
                    <input type="radio" id=${data.label} name="paymentRadios" @click="${this.handleClick}">${data.label} <br />
                    <!-- RENDERING FORMS  -->
                    <p id=${this.formIndex}>${this.formIndex > -1 ? this.renderForm(data.form, data.paymentIcons) : ''}</p>
                `)}
        `;
    }

最后，这是处理收音机点击的方法：

protected handleClick(e: any){
        if(e.target.id == this._data.forms[0].label){
            this.formIndex = 0
        } else if(e.target.id == this._data.forms[1].label) {
            this.formIndex = 1
        }
        console.log(this.formIndex);
    }

如何使它在单击第一个单选时仅显示第一个表单而单击第二个单选时仅显示第二个表单？谢谢！

【问题讨论】：

标签： javascript typescript lit

【解决方案1】：

我只会使用lit.dev docs 中描述的条件渲染

一个最小的例子如下所示：

@customElement('test-cond-render')
export class CondRender extends LitElement {
    
    @state()
    selectedForm = -1;

    formData = [
        {id: 0, title: 'form one'},
        {id: 1, title: 'form two'}
    ];


    renderForm() {
        if(this.selectedForm === -1) {
            return html`
                <span>Please select a form</span>
            `;
        } else if (this.selectedForm === 0) {
            return html`
                <form action="#" target="_blank">
                    <p>
                        Select your interests:<br>
                        <input type="checkbox" name="movies"> Movies<br>
                        <input type="checkbox" name="sports"> Sports<br>
                        <input type="checkbox" name="videogames"> Videogames
                    </p>
                    <input type="submit" value="Send data">
                </form>
            `;

        } else if (this.selectedForm === 1) {
            return html`
                <form action="#" target="_blank">
                <p>
                    Enter your full name: <input type="text" name="fullname">
                    <input type="submit" value="Send data">
                </p>
                </form>
            `;

        } else {
            return html`
                <span>Something went wrong..</span>
            `;
        }
    }
    handleClick(form_id:number) {
        console.log('handle click:', form_id);
        this.selectedForm = form_id;
    }
    render() {
        return html `
            <h2>Cond render</h2>
            ${this.formData.map((data) => 
                html`
                    <input type="radio" name="form-group" value="${data.id}" id="${data.id}" @click="${this.handleClick.bind(this, data.id)}">
                    <label for="${data.id}">${data.title}</label>
                `
            )}
            
            <div>${this.renderForm()}</div>
        `;
    }
}

你的表格可能比较复杂，但原理应该是一样的。

您也可以使用cache directive 进行渲染，这样它就不会在每次切换时为所选表单重新创建 DOM。

<div>${cache(this.renderForm())}</div>

【讨论】：