React中使用replaceAll()添加<br>标签无法换行如何解决

根因说明 #

React 默认会对插入到 JSX 中的字符串做转义处理，防范 XSS 攻击，你通过 replaceAll 生成的 <br> 会被当成普通文本渲染，不会被浏览器解析为换行标签，所以看不到换行效果。

解决方案 #

方案1（推荐，安全无风险） #

先把字符串按逗号拆分为数组，再遍历数组插入换行标签，不需要依赖高危渲染属性：

export default function App() {
  const string = 'test data,cars,colors,demo';
  const textArr = string.split(',');

  return (
    <div className="App">
      <h1>
        Hello 
        {textArr.map((item, idx) => (
          <React.Fragment key={idx}>
            {idx !== 0 && <br />}
            {item}
          </React.Fragment>
        ))}
      </h1>
    </div>
  );
}

方案2（使用replaceAll，需注意安全风险） #

如果你坚持要通过 replaceAll 替换生成 HTML 字符串再渲染，可以使用 dangerouslySetInnerHTML，注意仅在你能确保字符串内容完全可控、没有用户输入的场景下使用，避免XSS攻击：

export default function App() {
  const string = 'test data,cars,colors,demo';
  // 用replaceAll替换逗号为<br>
  const renderHtml = `Hello ${string.replaceAll(',', '<br>')}`;

  return (
    <div className="App">
      <h1 dangerouslySetInnerHTML={{ __html: renderHtml }} />
    </div>
  );
}

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