StencilJS/ Javascript Class 不能 return 结果到组件

Question

我正在尝试 return 将一个元素作为 JSX 嵌入到我的组件中。我是 StencilJS 的新手，在初始化我的变量并将它们的结果 return 发送到组件时遇到了问题。我确信他们是菜鸟犯的错误。

export class PwSortableHeader {
render() {
 let label;
 let button = document.getElementById("clickme")
 let count = 0;
 button.onclick = function() {
  count += 1;
  if (count === 1) {
    label = <pw-i-lined-default-sort />
  } else if (count === 2) {
    label = <pw-i-lined-up-sort />
  } else {
    label = <pw-i-lined-down-sort  />
  }

};
return (
  <Host id="clickme">
    <slot />
    {label}  // variable not initialized
  </Host>
);
}
}

Answer 1

想通了。需要来自组件状态的函数和实例变量。

export class PwSortableHeader {
  @Prop() size: number = 30;
  @Prop() fillcolor: string | "green" | "grey" | "black" | "white" = "grey";
  @Classy @Prop() direction: string | "ascending" | "descending" = "descending";
  @State() label: any = 1;
  @State() count: number = 1;

  counter = () => {
      this.count += 1;
      if (this.count === 1) {
        this.label = <pw-i-lined-default-sort />
      } else if (this.count === 2) {
        this.label = <pw-i-lined-up-sort />
      } else {
        this.label = <pw-i-lined-down-sort  />
      }
  }

  render() {
    return (
      <Host onClick={this.counter}>
        <slot />
        {this.label}
      </Host>
    );
  }
}

StencilJS/ Javascript Class 不能 return 结果到组件

StencilJS/ Javascript Class can't return result to component

javascript

stenciljs