Question

我正在为jsx中的Href属性搜索内联条件解决方案。如果我提供网址，我想输出：-

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

如果不是：-

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

Answer 1

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

Answer 2

尝试

以上渲染方法

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

在渲染方法中

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

Answer 3

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

this.state = {
   url: String
}

，然后在return部分内的render函数中，创建如下语句：

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

JSX：内联条件属性[href]

3 个答案: