且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

JSX:内联条件属性[HREF]

更新时间:2022-06-09 00:03:13

您可以结合使用conditional ternary operatorspread 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