react项目通常会在jsx中间使用&&字符来实现条件渲染,如下:
{array?.length&&<div className='image-container'></div>}
{!array?.length&&<div className='image-container'></div>}
我们的目的是希望数组不为空时渲染上方代码,为空时渲染下方代码,实际上因为jsx的编译机制,不能够将0转化为Boolean的false,会直接编译为0,因此当array?.length为0时,这种方法会导致项目中出现‘0’或者‘00’
假如array?.length为0,渲染结果为0。
如何修复这种问题?
如果是数字则应该转为布尔值以避免0的出现
上面的代码可以改为:
{array?.length>0&&<div className='image-container'></div>}
{!array?.length>0&&<div className='image-container'></div>}
这样既可避免0的出现,
除此之外还可以:
1,用三目运算符替代&&进行渲染
{array?.length? <span>{array?.length}</span> : null}
2,用Boolean
{Boolean(array?.length) && <span>{array?.length}</span>}
3,用双重否定
{!!array?.length && <span>{array?.length}</span>}
jsx的编译机制
// 可渲染值 1 && <FooComponent /> // => jsx计算结果为<FooComponent />,因此渲染<FooComponent/> "a string" && <FooComponent /> // => jsx计算结果为<FooComponent />,因此渲染<FooComponent /> 0 && <FooComponent /> // => jsx计算结果为0,Renders '0' true && <FooComponent /> // => jsx计算结果为<FooComponent />,因此渲染<FooComponent /> // 不可渲染值 false && <FooComponent /> // => jsx计算结果为false,因此什么都不渲染 null && <FooComponent /> // => jsx计算结果为null,因此什么都不渲染 undefined && <FooComponent /> // => jsx计算结果为undefined,因此什么都不渲染
{"1"} // 渲染为"1" {0} // 渲染为0 {<FooComponent />} // 假设为正常组件,渲染为<FooComponent /> {undefined} // 不渲染 {true} // 不渲染 {false} // 不渲染 {null} // 不渲染
最后,希望能够帮到您!