字符串变量条件渲染：如何动态控制地址与附加信息的换行展示

实现方案 #

你可以利用React的条件渲染特性实现需求，这里提供两种常用写法：

写法1：JSX内联条件判断（适合需要给additionalInfo单独加样式的场景）

<Text subtitle gray>
  {address}
  {additionalInfo != null && (
    <>
      ,{'\n'}
      {additionalInfo}
    </>
  )}
</Text>

说明：

• 用additionalInfo != null做判断，只会过滤null和undefined，如果需要同时过滤空字符串、0这类假值，可以把判断条件简化为{additionalInfo && ...}
• {'\n'}是Text组件内可识别的换行写法，<>是React Fragment的简写，用来包裹多个同级节点无需新增冗余外层元素

写法2：提前拼接文本（更简洁，纯文本场景优先用）

// 提前处理要展示的文本
const renderContent = additionalInfo != null ? `${address},\n${additionalInfo}` : address;

// 渲染时直接传变量即可
<Text subtitle gray>{renderContent}</Text>

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