将 Prop() 字符串值添加到主机 Class

Question

我是 StencilJS 和 JSX 的新手。

在我的 StencilJS 组件中，我有四个道具：

禁用：布尔值
hasIcon:布尔值
仅图标：布尔值
按钮类型：字符串

在我的 render() 函数中我有：

<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly
      }}>

我想将名为 buttonType 的字符串属性包含在 class 中，但找不到关于如何完成此操作的文档。

有什么想法吗？

Answer 1

你可以用方括号括起来(a Computed property name):

<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly,
        [this.buttonType]: true,
      }}>

您也可以使用template literal，例如添加前缀：

<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly,
        [`type-${this.buttonType}`]: true,        
      }}>

请注意，这是一项标准 JavaScript 功能，并非特定于 Stencil 或 JSX。

将 Prop() 字符串值添加到主机 Class

Add a Prop() String Value to Host Class

jsx

stenciljs