react-bits:条件渲染
发布时间:2020-12-15 07:26:11 所属栏目:百科 来源:网络整理
导读:react-bits 原文 条件渲染时可以使用if/else,但当更复杂或需要判断的变量更多时,推荐分离组件替代 //i f function render() { return condition spanRendered when ` truthy `/span} // unless function render() { return condition || spanRendered when
react-bits 条件渲染时可以使用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>
)
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |