ReactJS 如何将 HTML 字符串转换为 JSX ？

在ReactJS中，通常我们不直接从HTML字符串转换到JSX，因为这样做可能会引入安全风险，例如跨站脚本（XSS）攻击。然而，有时候，特别是在从外部API获取数据时，我们可能需要将HTML字符串渲染到React组件中。这种情况下，我们可以使用dangerouslySetInnerHTML属性来实现。

使用 dangerouslySetInnerHTML

dangerouslySetInnerHTML 是React的一个属性，允许你设置组件的innerHTML。它被命名为 "dangerously" 是因为使用它可能会让你的应用容易受到XSS攻击。因此，如果你决定使用这个属性，你需要确保你加载的HTML是安全的。

示例代码：

jsx
function HtmlComponent({ htmlString }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

const htmlString = '<p>Hello, <strong>world</strong>!</p>';
const App = () => {
  return <HtmlComponent htmlString={htmlString} />;
};

export default App;

在这个例子中，HtmlComponent接收一个名为htmlString的prop，这个prop包含了要渲染的HTML字符串。通过将这个字符串作为__html键的值传递给dangerouslySetInnerHTML，React会将这个字符串解析为HTML而不是文本，从而渲染格式化的HTML内容。

安全考虑

如果你从不可信的源接收HTML内容，你应该在将其传递给dangerouslySetInnerHTML之前对其进行清理，以确保没有恶意脚本。可以使用如dompurify等库来消毒HTML内容。

示例使用dompurify：

jsx
import DOMPurify from 'dompurify';

function SafeHtmlComponent({ htmlString }) {
  const safeHtml = DOMPurify.sanitize(htmlString);
  return <div dangerouslySetInnerHTML={{ __html: safeHtml }} />;
}

const unsafeHtmlString = '<p>Hello, <script>alert("Hacked!")</script><strong>world</strong>!</p>';
const App = () => {
  return <SafeHtmlComponent htmlString={unsafeHtmlString} />;
};

export default App;

在这个例子中，我们使用DOMPurify.sanitize来清洗HTML字符串，确保它不包含任何恶意脚本，然后再使用dangerouslySetInnerHTML进行渲染。

结论

虽然直接从HTML字符串到JSX的转换不是React推荐的做法，但通过使用dangerouslySetInnerHTML和适当的安全措施，我们可以安全地将HTML内容集成到React应用中。总是确保对任何从外部来源获取的HTML进行清洁处理，以保护你的应用免受XSS攻击。