JSX:内联条件属性[href]

Question

我在jsx中搜索Href属性的内联条件解决方案.如果我提供网址,我想输出: -

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

如果不:-

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

Answer 1

您可以使用条件三元运算符和spread属性的组合在render方法中包含内联条件.例如,如果URL是渲染方法的本地变量,并且如果您只想包含href属性(如果URL是真实的),则可以执行以下操作:

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>
  )
}

如果所需元素之间的差异足够大,您还可以更改条件以返回不同的元素,而不是使用spread属性.(如果三元条件确定要返回的根元素,则可以删除周围环境{,}因为编译器尚未解释JSX.)

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

最终,它取决于两种状态之间的差异程度以及最适合代码库的风格.有关更多信息或替代方案,我建议您阅读此相关问题.