React中如何将逗号替换为换行？两种尝试方法均无效

失效原因 #

你之前的两种写法没起作用的核心问题：

• 直接替换为<br>时，React会将其转义成纯文本，不会解析成HTML换行标签
• 替换为普通换行符时，HTML的<p>标签默认忽略空白字符和换行，无法显示预期效果

可行解决方案 #

方案1：使用dangerouslySetInnerHTML（注意风险）

如果你的字符串内容是可信无风险的（比如后端返回的固定合规内容），可以用这个方法让HTML标签生效：

<p 
  className='containerProductDetailsPOne' 
  style={{ overflow:"hidden", overflowY:"scroll" }}
  dangerouslySetInnerHTML={{
    __html: location.state.product.productSpec.replace(/,/g, '<br>')
  }}
></p>

注意：该方法会直接渲染HTML内容，若字符串包含恶意代码会有XSS风险，仅在内容完全可信时使用。

方案2：分割字符串后渲染（推荐，安全无风险）

将字符串按逗号分割为数组，遍历渲染每个元素并添加换行标签，完全规避XSS风险：

import React from 'react';

// ...

<p 
  className='containerProductDetailsPOne' 
  style={{ overflow:"hidden", overflowY:"scroll" }}
>
  {location.state.product.productSpec.split(',').map((item, index) => (
    <React.Fragment key={index}>
      {item.trim()} {/* 可选：去除逗号前后的多余空格 */}
      {index !== location.state.product.productSpec.split(',').length - 1 && <br />}
    </React.Fragment>
  ))}
</p>

解释：

• split(',')将原字符串拆分为数组
• map遍历数组元素，用React.Fragment包裹避免生成多余DOM节点
• 最后一个元素后不添加<br>，避免出现多余换行

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