React Table不显示反斜杠及斜杠间内容、展示空方框问题如何解决

问题根因 #

你遇到的显示问题由字符串中包含的不可打印ASCII控制字符导致：\u0010、\u0016都属于ASCII控制字符区间（0x00-0x1F、0x7F），无对应可显示字形，浏览器默认会将其渲染为空白占位方框，部分渲染逻辑还会误判截断控制字符后的内容。

解决方案 #

方案1：删除无效控制字符（推荐，无特殊保留要求时使用） #

渲染前对数据源的对应字段做控制字符过滤，示例代码：

// 正则匹配所有不可打印ASCII控制字符，可自行调整保留换行、制表符等需要的空白符
const cleanSpecialStr = (rawStr) => {
  return rawStr.replace(/[\x00-\x1F\x7F]/g, '')
}

// 可直接在React Table列配置中调用
const columns = [
  {
    Header: '文件路径',
    accessor: 'path',
    Cell: ({ value }) => cleanSpecialStr(value)
  }
]

处理后渲染结果为/.u/LGIRLGAV0735017500099A925。

方案2：转义展示原始编码（需要保留原始信息时使用） #

如果业务要求完整展示原始字符的转义形式，可将控制字符转为可视化的转义序列：

const escapeControlChars = (rawStr) => {
  return rawStr.replace(/[\x00-\x1F\x7F]/g, (match) => {
    return `\\u${match.charCodeAt(0).toString(16).padStart(4, '0')}`
  })
}

处理后渲染结果完全符合预期：/.\u0010\u0016u/LGIRLGAV0735017500099A925。

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