条件渲染时可以使用if/else,但当更复杂或需要判断的变量更多时,推荐分离组件替代
//if
function render() {
return condition && <span>Rendered when `truthy`</span>
}
// unless
function render() {
return condition || <span>Rendered when `falsey`</span>
}
// if- else (tidy one - liners)
function render() {
return condition
? <span>Rendered when `truthy`</span>
: <span>Rendered when `falsey`</span>
}
// if- else (big blocks)
function render() {
return condition ? (
<span>
Rendered when `truthy`
</span>
) : (
<span>
Rendered when `falsey`
</span>
)
}
使用falsy或truthy(非布尔值)合并逻辑运算符
const Oops = ({showFirst,dontShowSecond}) => (
<div>
{showFirst && 'first'}
{dontShowSecond || 'second'}
</div>
)
使用!!将输入转换成布尔值
const Oops = ({showFirst,dontShowSecond}) => (
<div>
{!!showFirst && 'first'}
{!!dontShowSecond || 'second'}
</div>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。