JSX：内联条件属性[HREF]

问题描述

我正在JSX中搜索href属性的内联条件解决方案。如果我提供url，我想输出：-

<a className="navbar-brand" href="/example-url" >Logo</a>

如果没有：-

<a className="navbar-brand">Logo</a>

推荐答案

您可以结合使用conditional ternary operator和spread attributes在Render方法中包括内联条件。例如，如果URL是呈现方法的本地变量，并且如果您只想在URL为true的情况下包含href属性，则可以执行以下操作：

render() {
  return (
    <a className="navbar-brand" {... url ? {href: url} : {}}>Logo</a>
  )
}

您还可以在Render方法的开头准备属性，以使内容更具可读性：

render() {
  const attributes = url ? {href: url} : {}

  return (
    <a className="navbar-brand" {...attributes}>Logo</a>
  )
}

如果所需元素之间的差异足够大，您还可以更改条件以返回不同的元素，而不是使用扩散属性。(如果三元条件是确定要返回的根元素，您可以删除周围的{和}，因为编译器还没有解释JSX。)

render() {
  return (
    <div>
      {url
        ? <a className="navbar-brand" href={url}>Logo</a>
        : <a className="navbar-brand">Logo</a>
      }
    </div>
  )
}

最终，这取决于两个州之间的差异有多大，以及最适合您的代码库样式的是什么。有关更多信息或替代方案，我建议阅读related question。

这篇关于JSX：内联条件属性[HREF]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！