reactjs - JSX:内联条件属性 [href]

Question

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

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

如果没有:-

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

Answer 1

最简单的解决方案

React 删除值为 undefined 的属性或null .

您没有指定如何有条件地提供 URL，但现在，我假设您有一个 url当您想要包含 href 时设置为字符串的变量 anchor 上的属性，以及 undefined当你想省略它时。

在这种情况下，您可以使用 url对于属性的值，React 只会添加 href当其值不是 undefined 时属性或null :

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

如果您想根据 url 是否存在来排除该属性，这非常有用。是一个字符串或 undefined或null ，但这可能并不总是您想要检查的条件。在这些其他情况下，您可以使用 conditional ternary operator有条件返回 undefined或null无论什么条件都有意义。

例如，如果 url是一个空字符串，前面的代码片段实际上仍然会设置 href属性可能不是您想要/期望的。为了避免这种情况，您可以使用条件三元来返回 undefined如果 URL 不真实:

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

替代解决方案

如果您发现自己想要根据条件更改多个(或不同)属性，您可以通过将条件三元组与 spread attributes 结合起来更进一步。 .

这个例子有点做作，但我们可以说，除了有条件地包含或排除 href 之外，属性，您还希望根据 URL 是否真实有条件地指定类名。

您可以通过使用带有三元条件的扩展属性来做到这一点:

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

您还可以在函数开头准备属性以使内容更具可读性:

const attributes = url
  ? { className: "navbar-brand", href: url },
  : { className: "navbar-brand inactive" };

return (
  <a {...attributes}>Logo</a>
)

当然，如果所需元素之间的差异足够大，您可能最好返回完全不同的元素，而不是使用扩展属性。

(如果使用三元条件来确定元素的根，那么您可以删除周围的 { 和 }，因为编译器尚未解释 JSX。)

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

最终，您要采用哪种方法取决于您决定如何包含或排除属性、属性有多少(以及如何)不同，以及什么适合您的代码库的风格最好的。

有关更多信息或替代方案，我建议阅读此文章 related question .