使用&&判断的场景差异
最近在开发中发现一个小差异,在我使用&&来判断一个元素是否存在的场景下,打开html结构能看到元素里多了一对空的标签 <div></div>,这个时候一旦涉及弹性盒模型背景下的布局分配,它就会占一个空间,视觉上看起来它是没有元素的。
实际上,它会因为类似场景下的布局分配多一部分的占位,所以我认为在项目中要进行场景的区分来使用&&,比如是一个右下角渐渐弹出的提示,这种不在文档流上存在占位的元素,就可以使用&&来进行判断,但涉及占位的场景,为了稳妥起见,其他时候还是建议使用下方的三元运算符来进行判断。
//1、判断是否存在某元素,是则运行接下来的代码
res && this.setState({ qrCode: res });
//2、一般用于if判断和其他判断条件并用
typeof url === 'string' && url.length
//3、判断一个元素是否存在
{isCheck && (
<Button size="small" >
按钮
</Button>
) }
//判断一个元素是否存在的另一种方式(推荐)
{isCheck ? (
<Button size="small" >
按钮
</Button>
) : null}
转载自:https://segmentfault.com/a/1190000041563416