React JS中如何将字符串中的@替换为换行符实现换行显示

你遇到的问题是因为HTML默认不会把\n解析为换行，只会当作空白字符处理，所以直接替换成\n看不到换行效果。这里给你两种可行的解决方法：

方法一：分割字符串并插入<br>标签 #

把原字符串按@分割成数组，然后在JSX中遍历数组，在分割点插入<br>标签实现换行：

const content = data.referenceNo;
const parts = content.split('@');

// 在表格单元格中渲染
<tr>
  {parts.map((section, idx) => (
    <>
      {section.trim()}
      {idx !== parts.length - 1 && <br />}
    </>
  ))}
</tr>

这种方法能精准控制换行位置，也避免了使用危险的HTML解析方法。

方法二：利用CSS样式识别换行符 #

如果更倾向于用\n替换@，可以给包含文本的元素添加white-space: pre-wrap样式，让浏览器识别换行符：

const result = data.referenceNo.replace('@', '\n');

// 渲染时添加样式
<tr style={{ whiteSpace: 'pre-wrap' }}>{result}</tr>

这种方法代码更简洁，适合不需要复杂排版的场景。

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