如何在ReactJS的JSX中添加HTML标签？

你遇到的问题是React默认会转义所有插入到JSX中的字符串，防止XSS攻击，所以直接写<strong>这类标签会被转义成纯文本显示。下面是两种解决方式：

方法一：使用JSX元素组合（推荐） #

这是React官方推荐的安全写法，直接用JSX元素拼接内容：

import { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <span>{isLoading ? "abc" : <>abc <strong>AND</strong> xyz</>}</span>
      </div>
    </div>
  );
}

这里用React的Fragment（<>...</>）把普通文本和<strong>标签包裹起来，React会正常解析并渲染样式。

方法二：使用dangerouslySetInnerHTML（谨慎使用） #

如果你必须使用HTML字符串的形式，可以用这个API，但只有当内容完全由你控制、不存在安全风险时才用，因为它会直接解析HTML，可能引入XSS漏洞：

import { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const displayContent = isLoading ? "abc" : "abc <strong>AND</strong> xyz";

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <span dangerouslySetInnerHTML={{ __html: displayContent }} />
      </div>
    </div>
  );
}

通过dangerouslySetInnerHTML传入包含HTML的字符串，React会直接将其作为innerHTML插入，从而渲染出带样式的内容。

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