tsx 中的 stenciljs 條件渲染返回

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