最简单的解决方案
React 删除值为以下的属性undefined
or null
.
您没有指定如何有条件地提供 URL,但现在,我假设您有一个url
当您想要包含时设置为字符串的变量href
锚点上的属性,以及undefined
当你想省略它时。
在这种情况下,您可以使用url
对于属性的值,React 只会添加href
当属性的值不是时undefined
or null
:
return (
<a className="navbar-brand" href={url}>Logo</a>
)
如果您想根据是否url
是一个字符串或undefined
or null
,但这可能并不总是您想要检查的条件。在这些其他情况下,您可以使用条件三元运算符 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator有条件返回undefined
or null
无论什么条件都有意义。
例如,如果url
是一个空字符串,前面的代码片段实际上仍然会设置href
属性可能不是您想要/期望的。为了避免这种情况,您可以使用条件三元来返回undefined
如果 URL 不真实:
return (
<a className="navbar-brand" href={url ? url : undefined}>Logo</a>
)
替代解决方案
如果您发现自己想要根据条件更改多个(或不同)属性,则可以通过将条件三元组与传播属性 https://reactjs.org/docs/jsx-in-depth.html#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>
)
当然,如果所需元素之间的差异足够大,那么返回完全不同的元素可能比使用扩展属性更好。
(如果使用三元条件来确定元素的根,那么您可以删除周围的{
and }
因为编译器还没有解释 JSX。)
return (
<div>
{url
? <a className="navbar-brand" href={url}>Logo</a>
: <a className="navbar-brand inactive">Logo</a>
}
</div>
)
最终,您想要采用哪种方法取决于您决定如何包含或排除属性、属性有多少(以及如何)不同,以及什么最适合您的代码库风格。
有关更多信息或替代方案,我建议阅读此内容相关问题 https://stackoverflow.com/questions/31163693/how-to-conditionally-add-attributes-to-react-components.