在React的该场景下如何添加<br/>标签？

你遇到的问题是React会自动转义模板字符串里的HTML标签，把<br/>当成纯文本显示。下面是几种靠谱的解决方式：

• 直接拆分JSX元素
  不用模板字符串拼接，直接把内容拆成多个部分，中间插入<br/>标签：

  function MyComponent() {
    return (
      <>
        aaaa
        <br />
        bbbb
      </>
    );
  }
  

• 用数组组合动态内容
  如果内容是动态生成的，可以把文本和标签放到数组里（记得给每个元素加唯一key，避免React警告）：

  function MyComponent() {
    const firstText = 'aaaa';
    const secondText = 'bbbb';
    return <>{[firstText, <br key="line-break" />, secondText]}</>;
  }
  

• 使用dangerouslySetInnerHTML（谨慎使用）
  如果内容是外部传入的HTML字符串（比如后端返回带<br/>的文本），可以用这个属性直接渲染原始HTML，但必须确保内容来源绝对安全，防止XSS注入攻击：

  function MyComponent() {
    const htmlContent = 'aaaa <br />bbbb';
    return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
  }
  

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