JSX：内联条件属性 [href]答案

【问题标题】：JSX: Inline conditional attribute [href]JSX：内联条件属性 [href]
【发布时间】：2019-01-30 12:55:38
【问题描述】：

我正在寻找 jsx 中 Href 属性的内联条件解决方案。如果我提供 url，我想输出：-

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

如果没有：-

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

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

您可以使用conditional ternary operator 和spread attributes 的组合在渲染方法中包含内联条件。例如，如果 URL 是您的渲染方法的本地变量，并且如果您只想在 URL 真实的情况下包含 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。

【讨论】：

谢谢瑞恩。Logo 适合我
@Ankit 一些很好的例子可以在reactjs.org/docs/jsx-in-depth.html#spread-attributes 找到。本质上，spread 属性允许您使用现有对象向元素添加其他属性。结合条件运算符 (a ? b : c)，此答案使用扩展属性添加 {href: url} 或 {}，具体取决于 URL 是否为真。第二个例子更清楚地说明了这一点。

【解决方案2】：

试试这个

上面的渲染方法

let linkAttrs={}
url="/example-url"//Or empty
linkAttrs.className="navbar-brand"
if(url !=="")
   linkAttrs.href=url;

在渲染方法中

<a {...linkAttrs}>Logo</a>

【讨论】：

【解决方案3】：

您可以将您的 URL 作为字符串状态，例如

this.state = {
   url: String
}

然后在返回部分内的渲染函数中，创建如下语句：

  {
    (
      this.state.url &&
      <a className="navbar-brand" href={this.state.url}>Logo</a>
    )
    || <a className="navbar-brand">Logo</a>
  }

【讨论】：

嘿。我需要一些可以放在锚标签内的东西。
嘿，据我所知，唯一的方法是在我的答案或上面的答案中提到。例如，您不能在控制锚标记是否具有 href 属性的标记内放置条件。有关更多信息，请参阅this 文章。
我得到了答案，你可以这样做：- 徽标