javascript - 如何更改 Lit-Element 中的 bool 属性以隐藏组件上的内容？

Question

我有一个自定义组件，当我将 bool 属性设置为 false 时，它​​应该隐藏内容。除了那个之外，其他所有属性都会得到反射(reflect)。我一定做错了什么。

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

如果我使用像 <my-component></my-component> 这样的组件在 HTML 文件中，它显示:按预期默认。

如果我这样使用它: <my-component title="New Title"></my-component>它显示:新标题如预期。

但是如果我试图隐藏它 <my-component title-enable="false"></my-component> bool 值不会改变。我试过 !title-enable, title-enable='false", .titleEnable=false 和所有你能想象到的变体。最让我生气的是，每当我在构造函数中设置 'this.titleEnable=false' 和我碰巧只是在标签上声明了变量 WITHOUT 值，并将其视为 TRUE 出现“默认”。 <my-component title-enable></my-component> 我完全迷路了。

Answer 1

好的，这是一个棘手的问题。您需要通过传递一些对象来以不同的方式处理它，如下所示:

  static get properties() {
    return {
      titleConfig: {
        type: Object,
        attribute: 'title-config'
      }
    }
  }

  render() {
    return html`                
      ${this.titleConfig.titleEnable
        ? html`
      <p class="title" ?hidden="${!this.titleConfig.titleEnable}">${this.titleConfig.title}</p>
      `
        : html``} 
  `
  }

在 HTML :

<my-component title-config='{"title":"shan", "titleEnable": false}'></my-component>

现在，问题是为什么它是 true每次？

Answer: For a Boolean property to be configurable from markup, it must default to false. If it defaults to true, you cannot set it to false from markup, since the presence of the attribute, with or without a value, equates to true. This is the standard behavior for attributes in the web platform.

取自 polymer doc .

因此，通过创建属性 title-enable , HTML将此属性视为 true
对于开始研究 Polymer 或 LitElement 的人来说，这真是令人沮丧。