将lit html中的嵌套三元组转换为if/lit

Question

如何在下面编写lit代码

我对lit很陌生，我尝试将下面的代码转换为if/lit，而不是嵌套的三元代码。

 render() { 
    return this.html`   
     ${this.data ? this.html`<comp data={this.data}></comp>`
                    : data1 && data1.test === 'valid' && valueCheck ? this.html`
                      <comp2 data={this.data2}  ></comp2>
                    `
                    : this.html`
                      <comp1 data={this.data1}  ></comp1>
                    `} `;}

需要转换为简单的，如果其他

Answer 1

我知道你想用这个来渲染组件。通常，如果/else需要执行复杂的验证，则在呈现部分之外执行它们，并将其归因于变量。

let dataToRender = undefined;
if(this.data){
    dataToRender = this.html`<comp data={this.data}></comp>`
} else if(data1 && data1.test === 'valid' && valueCheck){
    dataToRender = <comp2 data={this.data2}  ></comp2>
} else {
    dataToRender = <comp1 data={this.data1}  ></comp1>
}

然后，在呈现函数上简单地：

render(
    ${dataToRender}
)

Answer 2

您通常希望基于逻辑来枚举值，如果您的逻辑增长，它在将来会更易读和更易于维护。

您还可以结合内置的choose指令，根据键值呈现多个模板中的一个。

import { LitElement, html } from "lit";
import { choose } from "lit/directives/choose.js";

enum RenderOptions {
    COMP,
    COMP_1,
    COMP_2
}

class MyElement extends LitElement {
    // mocks
    data = {}
    data1 = { test: "valid" }
    data2 = {}
    valueCheck = true

    render() {
        return html`
            ${choose(this._conditionalRender(), [
                [RenderOptions.COMP, () => html`<comp data={this.data}></comp>`],
                [RenderOptions.COMP_1, () => html`<comp1 data={this.data1}></comp1>`]
                [RenderOptions.COMP_2, () => html`<comp2 data={this.data2}></comp2>`],
            ],
            () => html`<h1>Error</h1>`)}
        `;
    }

    private _conditionalRender(): RenderOptions {
        if (this.data) {
            return RenderOptions.COMP
        }
        if (this.data1 && this.data1.test === 'valid' && this.valueCheck) {
            return RenderOptions.COMP_2
        }
        return RenderOptions.COMP_1
    }
  }


// implementations of...
// comp
// comp1
// comp2