使用&&判断的场景差异

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

更多相关文章

随机推荐