如何修复react项目的零渲染问题，页面出现‘0’或者‘00’

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} // 不渲染

最后，希望能够帮到您！