JSX обертка div в теге <a>, если URL существует

Question

Я пытаюсь обернуть теги вокруг элемента (значок SVG), если URL-адрес добавлен. У меня есть:

<Fragment>

  { url && (
    <a href={ url }>
  ) }

      <FontAwesomeIcon icon={ myIcon } />

  { url && (
    </a>
  ) }

</Fragment>

Я продолжаю получать Syntax error: Unexpected token (170:7) за </a>. Что я делаю не так?

Answer 1

"Что я делаю не так?" Вы думаете о JSX как HTML-строки. Это не. JSX - это расширение синтаксиса javascript для упрощения вызовов React.createElement.

Вы можете извлечь внутреннюю часть в переменную и использовать тернарный оператор для ее условного переноса

const icon = <FontAwesomeIcon icon={ myIcon } />

return (url ? <a href={url}>{icon}</a> : icon)

Answer 2

JSX анализирует ваш тег </a> как недопустимый синтаксис, поэтому вам нужно использовать другой способ:

<Fragment>

  { url? (
    <a href={ url }>
      <FontAwesomeIcon icon={ myIcon } />
    </a>
  ) : (
    <FontAwesomeIcon icon={ myIcon } />
  )}

</Fragment>