React使用react-bootstrap-table-next实现单元格多行输出的方法咨询

问题根源 #

React 出于安全机制默认会将字符串中的 HTML 标签（如 <br>）转义为纯文本展示，不会自动解析为 DOM 节点，因此直接在字段值中嵌入 <br> 标签无法触发换行效果。

实现方法 #

方案1：自定义单元格 formatter（推荐，兼容<br>/\n两种分隔符） #

通过列配置的formatter属性自定义单元格渲染逻辑，先对内容做分隔符拆分，再逐行渲染为块级元素。该方案安全性高，即使内容包含用户输入也不会有 XSS 风险。
代码修改示例：

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name',
  // 新增单元格渲染逻辑
  formatter: (cellContent) => {
    // 兼容带/不带斜杠的<br>标签，统一替换为换行符
    const normalizedContent = cellContent.replace(/<br\s*\/?>/g, '\n');
    // 按换行符拆分，过滤空行避免冗余空白
    const lines = normalizedContent.split('\n').filter(line => line.trim());
    // 逐行渲染为块级元素，自动换行展示
    return (
      <div>
        {lines.map((line, index) => (
          <div key={index}>{line}</div>
        ))}
      </div>
    );
  }
}, {
  dataField: 'price',
  text: 'Product Price'
}];

const products = [{
  id: '1',
  name: 'line1<br>line2\nline3', // 可同时兼容两种分隔符
  price: '123'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

方案2：CSS 样式处理（仅适配\n分隔符的场景） #

如果内容仅用\n作为换行分隔符，可通过给单元格添加white-space: pre-line样式，让浏览器自动识别换行符并展示为多行，无需额外修改渲染逻辑。
在列配置中添加样式即可：

const columns = [
  // 其他列配置保持不变
  {
    dataField: 'name',
    text: 'Product Name',
    // 直接加内联样式
    style: { whiteSpace: 'pre-line' }
    // 也可以自定义类名，在全局CSS中补充规则：
    // classes: 'multi-line-cell',
    // .multi-line-cell { white-space: pre-line; }
  }
]

若原有样式覆盖了white-space属性，可在CSS中添加!important提升优先级：.multi-line-cell { white-space: pre-line !important; }

方案3：直接渲染HTML（仅适配完全可信的内容） #

如果内容为完全可信的内部静态数据，不存在用户输入风险，可直接通过dangerouslySetInnerHTML解析HTML标签实现换行：

formatter: (cellContent) => {
  return <div dangerouslySetInnerHTML={{ __html: cellContent }} />
}

警示：该方式存在XSS注入风险，禁止用于包含用户可输入内容的场景。

方案选型参考 #

• 内容包含用户输入、同时用到<br>和\n两种分隔符：优先选择方案1
• 内容仅用\n作为分隔符、无<br>标签：选择方案2，代码量最少
• 内容为完全可信的静态数据：可选择方案3，实现最简便

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