JSX将div包装在<a> tag if url exists

Question

I'm trying to wrap tags around an element (an svg icon) if a url is added. I have:

<Fragment>

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

      <FontAwesomeIcon icon={ myIcon } />

  { url && (
    </a>
  ) }

</Fragment>

I keep getting Syntax error: Unexpected token (170:7) for </a>. What am I doing wrong?

Answer 1

“我做错了什么？”您正在将jsx视为html字符串。它不是。 JSX是javascript语法扩展，可简化React.createElement调用。

您可以将内部提取到变量中，并使用三元运算符有条件地包装它

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

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

Answer 2

JSX将JSONAPIBulkParser标记解析为无效语法，因此您需要使用另一种方式：

</a>