StencilJS条件渲染在TSX中的返回

Question

我StencilJS的渲染函数目前是用TypeScript编写的，如下所示：

render() {
  if( this._isInline ) {
    return (
      <span>
        <slot />
      </span>
    );
  } else {
    return (
      <div>
        <slot />
      </div>
    );
  }
}

但我更希望能够以这样的方式编写它：

render() {
  const tag = this._isInline ? 'span' : 'div';
  return (
    <{tag}>
      <slot />
    </{tag}>
  );
}

但是这样做会给我带来一堆错误信息。 有没有一种方法可以编写jsx代码，使我能够有条件地打开和关闭标签？

- Marek Krzeminski

Answer 1

您可以使用以下代码实现该功能：

render() {
   const Tag = this._isInline ? 'span' : 'div';
   return (
     <Tag>
       <slot />
     </Tag>
   );
}

- Gil Fink

---

谢谢，我没想到可以在变量周围不加花括号来使用它。正如你所猜测的那样，我是JSX的新手。现在如果我能弄清楚为什么我的TSX文件显示有关未使用Tag的警告就好了。[ts] 'Tag'被声明但其值从未被读取。 - Marek Krzeminski

请注意，Tag 必须使用大写字母 'T' 声明。如果您使用小写字母 't' 声明 "const tag = ..."，则会收到警告并且该项将无法呈现。 - Safa Alai