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