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

最新推荐文章于 2025-08-05 18:22:03 发布

niconicon____

最新推荐文章于 2025-08-05 18:22:03 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/niconicon____/article/details/130526556

在React项目中，jsx通常使用&&进行条件渲染。但当遇到array?.length为0时，由于0被视为truthy值，会导致意外渲染。为解决此问题，可以使用array?.length>0代替，或者采用三目运算符、Boolean转换或双重否定确保在array为空时不会渲染。这样可以避免因0值导致的错误渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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? {array?.length} : null}

2，用Boolean

{Boolean(array?.length) && {array?.length}}

3，用双重否定

{!!array?.length && {array?.length}}

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

最后，希望能够帮到您！