Stencil：在 WebComponent 中呈现动态属性

Question

在标签中实现动态属性似乎是不可能的。我想要实现的目标如下：

我想定义自己的select组件，渲染代码如下：

render() {
    return (
        <Host>
            <select class={this.cssClassMap} aria-label={this.label}>
                {
                    this.options.map((opt) => {
                        const Tag = 'option';
                        return <Tag value={this.extractValue(opt)}>{this.writeElement(opt, ['value'])}</Tag>;
                    })
                }
            </select>
        </Host>
    );
}

虽然可以将 const“标签”动态定义为字符串，但我没有机会动态呈现零个或多个属性，在此示例中它是“值”。

我想要实现的是：

 this.options.map((opt) => {
                    const Tag = 'option';
                    return <Tag determineAttributeList(opt)>{this.writeElement(opt, ['value'])}</Tag>;
                })

我在这上面找不到任何东西。

应该是最新的模板版本日期 15.02。

Answer 1

如果你想动态添加attributes/properties你可以使用一个对象并解构它:

const determineAttributeList = (option) => {
  return {
    value: option.value,
    customAttr: option.custom,
  };
}

return (
  <select>
    {this.options.map((opt) => {
      const Tag = 'option';
      return <Tag {...determineAttributeList(opt)}>{this.writeElement(opt, ['value'])}</Tag>;
    })
  </select>
);

注意 determineAttributeList 函数调用周围的 {... }。

Stencil：在 WebComponent 中呈现动态属性

Stencil: Rendering Dynamic Attributes in WebComponent

stenciljs