更新时间:2022-06-09 00:03:13
您可以结合使用conditional ternary operator和spread 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。