likes
comments
collection
share

使用&&判断的场景差异

作者站长头像
站长
· 阅读数 53

最近在开发中发现一个小差异,在我使用&&来判断一个元素是否存在的场景下,打开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
评论
请登录