Нужна помощь, чтобы установить имя класса для трафарета - PullRequest
Новая
       81

Нужна помощь, чтобы установить имя класса для трафарета

0 голосов
/ 15 апреля 2020

Таким образом, после прочтения документов и последующего изучения класса umedy на Stencil, я все еще не могу получить имена классов для моего объекта. например, у меня есть следующее 

import { Component, h, Prop } from '@stencil/core'

@Component({
tag: 'my-button',
styleUrl: 'my-button.css'
})

export class MyButton {
@Prop() btext: string;
@Prop() btype: string;

render(){
let classNaming: string = '';
switch(this.btype) {
   case "Primary":
       classNaming += 'My-Button-CSS';
       break;
   case "Secondary"
       classNaming += 'My-Button-CSS';
       break;
}

return <button class={classNaming}>this.btext</button>
}
}
}

Проблема в том, что класс никогда не появляется на кнопке. Я знаю, что в Reaction- bootstrap я видел в уроке, но никогда не использовал response, у них есть вариант = "", который в основном то, что я хочу построить, и мне не повезло, что это работает, так как учебники по трафарету и расширенные элементы редки. Другая проблема заключается в том, что все классы основаны на 1.8.

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Я думаю, что проблема с вашим кодом может заключаться в том, что когда btype prop не установлен для вашего компонента, тогда classNaming остается '' (пустая строка), а затем реализация vdom просто оставляет class атрибут отрисовывается при рендеринге узла, потому что class="" является избыточным.

Я скопировал ваш компонент на игровую площадку:
https://webcomponents.dev/edit/EVDjWjM0gINeOiJyLl9k?pm=1

Работает нормально. .. проверьте index.stories.tsx о том, как используются две разные кнопки. Вам нужно установить btype как 

<my-button btype="Primary" btext="First Button"></my-button>
0 голосов
/ 15 апреля 2020

Вы забываете двоеточие (:) после второго регистра (случай «Вторичный»), и в конце документа добавляется дополнительный }.

Вы можете поиграться с кодом на webcomponents.dev

Окончательный код должен быть: 

import { Component, h, Prop } from "@stencil/core";

@Component({
  tag: "my-button",
  styleUrl: "my-button.css",
})
export class MyButton {
  @Prop() btext: string;
  @Prop() btype: string;

  render() {
    let classNaming: string = "";
    switch (this.btype) {
      case "Primary":
        classNaming += "My-Button-CSS";
        break;
      case "Secondary":
        classNaming += "My-Button-CSS";
        break;
    }

    return <button class={classNaming}>{this.btext}</button>;
  }
}
...