Stenciljs условный возврат рендеринга в tsx

моя функция рендеринга 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, чтобы у меня были условные открывающие и закрывающие теги?

1
0
1 648
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добиться этого, используя следующий код:

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

спасибо, я не подумал попробовать использовать переменную без фигурных скобок. Как вы уже догадались, я новичок в JSX. Теперь, если бы я мог понять, почему мой файл TSX показывает предупреждение о том, что тег не используется. [ts] Тег объявлен, но его значение никогда не читается.

Marek Krzeminski 14.09.2018 15:02

Обратите внимание: важно, чтобы тег был объявлен с заглавной буквы «T». Если вы вместо этого объявите «const tag = ...» с буквой «t» в нижнем регистре, вы получите предупреждение, и элемент не будет отображаться.

Safa Alai 09.08.2019 19:14

Другие вопросы по теме