Добавить строковое значение Prop () в класс хоста - PullRequest
Новая
       98

Добавить строковое значение Prop () в класс хоста

0 голосов
/ 05 августа 2020

Я новичок в Stencil JS и JSX.

В моем компоненте Stencil JS у меня есть четыре свойства:

  • отключено: boolean
  • hasIcon: boolean
  • iconOnly: boolean
  • buttonType: string

В моей функции render () у меня есть: 

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

Я бы хотелось бы включить в класс строковое свойство buttonType, но не могу найти документации о том, как это сделать. sh this.

Есть идеи?

1 Ответ

1 голос
/ 05 августа 2020

Вы можете заключить его в квадратные скобки (a Имя вычисляемого свойства ): 

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

Вы также можете использовать литерал шаблона , например, чтобы добавить префикс: 

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

Обратите внимание, что это стандартная функция JavaScript, а не c для Stencil или JSX.

...