stenciljs 条件渲染返回 tsx

Question

我的 stenciljs 渲染函数目前是用打字稿这样编写的：

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 代码，以便我有条件打开和关闭标记？

Answer 1

您可以使用以下代码来实现：

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