0

因此，在阅读了文档然后在 Stencil 上上了一堂 umedy 课后，我似乎仍然无法在我的对象上设置类名。例如我有以下

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>
}
}
}

问题是课程永远不会出现在按钮上。我知道我在教程中看到的 react-bootstrap 中，但从未使用过 react，它们有 variant="" 这基本上是我想要构建的，并且没有运气让它工作，因为 Stencil 教程和高级项目很少。另一个问题是现有的类都是基于 1.8 的。

4

2 回答 2

0

您在第二种情况（情况“次要”）之后忘记了一个冒号（:)，并且}在文档的末尾有一个额外的内容。

您可以在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>;
  }
}
于 2020-04-15T20:52:05.250 回答
0

我认为你的代码的问题可能只是当btype你的组件上没有设置道具时，然后classNaming保持''（空字符串），然后 vdom 实现class在渲染节点时只是离开了属性，因为class=""是多余的。

我将您的组件复制到游乐场：
https ://webcomponents.dev/edit/EVDjWjM0gINeOiJyLl9k?pm=1

它工作正常......检查index.stories.tsx两个不同按钮的使用方式。你需要设置btype像

<my-button btype="Primary" btext="First Button"></my-button>
于 2020-04-17T18:25:46.763 回答