How to add a < br > tag in reactjs between two strings?

在ReactJS中处理字符串并在两个字符串之间插入HTML标签，如<br>标记，需要注意的是直接在字符串中插入HTML可能不会按预期渲染，因为React默认会转义字符串来防止XSS攻击（跨站脚本攻击）。为了安全地插入HTML，我们可以使用dangerouslySetInnerHTML属性，或者更常见的做法是使用JSX来组合字符串和HTML标签。

方法1: 使用JSX组合字符串与HTML标签

这是一种安全且常用的方法，在两个字符串之间插入<br>的示例如下：

jsx
function App() {
  const string1 = "Hello";
  const string2 = "World";

  return (
    <div>
      {string1}<br />{string2}
    </div>
  );
}

在这个组件中，string1 和 string2 被包裹在一个div元素中，并通过JSX直接在它们之间插入<br />标签。这样做可以安全地在两个字符串之间添加换行，且React会正确地渲染<br />标签。

方法2: 使用dangerouslySetInnerHTML

如果你需要从一个完整的字符串插入HTML，可以使用dangerouslySetInnerHTML，但请小心使用，因为这可能会使你的应用容易受到XSS攻击。示例代码如下：

jsx
function App() {
  const combinedString = "Hello<br />World";

  return (
    <div dangerouslySetInnerHTML={{ __html: combinedString }}></div>
  );
}

这段代码会将combinedString中的字符串渲染为HTML，包括<br />标记。然而，使用dangerouslySetInnerHTML需要确保内容是安全的，避免注入恶意内容。

总结

推荐使用第一种方法（使用JSX），因为它更安全，也是处理React中HTML和字符串结合的标准做法。如果必须从字符串中直接生成HTML内容，确保内容是安全的，或者使用库如dompurify来清理内容，再使用dangerouslySetInnerHTML。