React & Next.js：如何仅在prop存在有效值时渲染div，避免空值显示背景

问题根源 #

当前的条件判断仅作用于div内部的文本内容，div元素本身无论mrr是否有有效值都会渲染，绑定在div上的背景、内边距等样式自然会正常显示。

解决方案 #

方案1：仅在mrr有有效值时渲染整个div（无有效值时完全不占页面空间）

可根据你的业务需求调整判断逻辑，示例代码如下：

// 基础判断：mrr为假值（空串/undefined/null等）时不渲染
{mrr && (
  <div className="text-white font-base text-xs text-center p-1.5 bg-black">
    {mrr}
  </div>
)}

// 若需兼容0为有效值的场景：
{(mrr || mrr === 0) && (
  <div className="text-white font-base text-xs text-center p-1.5 bg-black">
    {mrr}
  </div>
)}

// 若需排除首尾空格后为空的情况：
{mrr?.trim() && (
  <div className="text-white font-base text-xs text-center p-1.5 bg-black">
    {mrr}
  </div>
)}

方案2：保留div占位，仅隐藏背景和内容（无有效值时仍占对应空间）

<div className={`text-white font-base text-xs text-center p-1.5 ${mrr ? 'bg-black' : 'bg-transparent'}`}>
  {mrr || ''}
</div>

内容的提问来源于stack exchange，提问作者FamousLastWords