如何实现仅当变量var不为null值时才换行的Conditional line break逻辑

问题原因 #

你当前的写法中<br />标签脱离了var的条件判断逻辑，无论var是否为null，这行换行标签都会被渲染，最终会出现var为空时多出来的空白行。

解决方案 #

将变量内容和换行标签作为整体放到条件判断中即可，只在var不为null时才会渲染整个片段：

<div>
  {/* 仅var严格不为null时，同时渲染变量内容和换行 */}
  {var !== null && <>{var}<br /></>}
  {var2 && `${var2}`}
</div>

补充说明 #

• 写法中的<>和</>是React Fragment的简写，作用是把变量和换行标签包成一个整体，不需要额外新增DOM节点，不会影响原有布局结构。
• 如果你需要同时排除undefined、空字符串等其他假值，可以把判断条件简化为{var && <>{var}<br /></>}，和你原有写法的判断逻辑保持一致。
• 如果是旧版本不支持Fragment简写的React环境，可以替换为<React.Fragment>{var}<br /></React.Fragment>，效果完全相同。
• 额外注意var是JavaScript的保留关键字，实际开发中建议更换变量名避免语法冲突。

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