JSX 将 div 包装在标记中(<a>如果 url 存在)

Question

如果添加了 url，我正在尝试将标签包裹在元素（svg 图标）周围。我有：

<Fragment>
  { url && (
    <a href={ url }>
  ) }
      <FontAwesomeIcon icon={ myIcon } />
  { url && (
    </a>
  ) }
</Fragment>

我一直在为</a> Syntax error: Unexpected token (170:7).我做错了什么？

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>