在 React 中渲染 HTML Partial Response 的最佳实践-js教程-PHP中文网

在 React 中渲染 HTML Partial Response 的最佳实践

DDD

发布： 2025-10-13 12:35:47

原创

236人浏览过

在 react 中渲染 html partial response 的最佳实践

本文旨在解决在 React 应用中渲染从后端接口获取的 HTML 片段的问题。传统方式 dangerouslySetInnerHTML 虽然可以渲染 HTML，但无法处理内嵌的样式。本文将探讨使用 iframe 嵌入，以及数据解耦等更安全、更高效的解决方案，并提供代码示例和注意事项，帮助开发者在 React 项目中优雅地处理 HTML Partial Response。

在 React 应用中，有时我们需要从后端接口获取 HTML 片段并进行渲染。这种场景通常出现在需要动态加载内容、或者后端服务直接返回预渲染好的 HTML 片段的情况下。虽然可以使用 dangerouslySetInnerHTML 来渲染 HTML，但这种方式存在一定的安全风险，并且无法很好地处理内嵌的样式。以下介绍几种更安全、更有效的解决方案。

1. 使用 iframe 嵌入 HTML

iframe 元素可以在当前 HTML 页面中嵌入另一个 HTML 页面。我们可以将从后端获取的 HTML 片段渲染到 iframe 中，从而实现隔离和样式的正确应用。

示例代码：

立即学习“前端免费学习笔记（深入）”；

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    fetch('https://example.com/some/v1', {
      headers: {
        'Content-Type': 'text/html',
      },
    })
      .then((response) => response.text())
      .then((data) => setHtmlContent(data))
      .catch((error) => console.error(error));
  }, []);

  return (
    <iframe
      srcDoc={htmlContent}
      title="Embedded HTML"
      style={{ width: '100%', height: '500px', border: 'none' }} // 调整样式以适应你的需求
    />
  );
};

export default MyComponent;

登录后复制

代码解释：

使用 useState hook 创建一个状态变量 htmlContent，用于存储从后端获取的 HTML 内容。
使用 useEffect hook 在组件挂载后发起网络请求，获取 HTML 内容。
将获取到的 HTML 内容赋值给 iframe 的 srcDoc 属性。
设置 iframe 的 width、height 和 border 样式，以适应你的需求。

优点：

样式隔离： iframe 中的样式不会影响到父页面的样式，避免了样式冲突。
安全性： iframe 提供了一定的安全隔离，可以降低 XSS 攻击的风险。

缺点：

通信复杂： 父页面和 iframe 之间的通信比较复杂，需要使用 postMessage API。
性能开销： iframe 会增加页面的渲染开销。

适用场景：

需要完全隔离样式和脚本的场景。
需要嵌入第三方 HTML 内容的场景。

2. 数据解耦与组件化

通常，后端接口应该返回序列化的数据（例如 JSON），而不是完整的 HTML 文档。在 React 应用中，我们可以将这些数据反序列化，然后使用 React 组件进行渲染。

示例：

假设后端返回以下 JSON 数据：

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

313

查看详情

{
  "title": "我的文章",
  "content": "这是文章的内容。",
  "styles": {
    "titleColor": "red",
    "contentFontSize": "16px"
  }
}

登录后复制

React 组件：

import React, { useEffect, useState } from 'react';

const MyArticle = () => {
  const [articleData, setArticleData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/api/article')
      .then((response) => response.json())
      .then((data) => setArticleData(data))
      .catch((error) => console.error(error));
  }, []);

  if (!articleData) {
    return <div>Loading...</div>;
  }

  const { title, content, styles } = articleData;

  return (
    <div>
      <h1 style={{ color: styles.titleColor }}>{title}</h1>
      <p style={{ fontSize: styles.contentFontSize }}>{content}</p>
    </div>
  );
};

export default MyArticle;

登录后复制

代码解释：

使用 useState hook 创建一个状态变量 articleData，用于存储从后端获取的文章数据。
使用 useEffect hook 在组件挂载后发起网络请求，获取文章数据。
将获取到的 JSON 数据反序列化，并赋值给 articleData。
使用 articleData 中的数据渲染 React 组件。

优点：

解耦： 前后端职责分离，后端负责提供数据，前端负责渲染。
可维护性： 代码结构清晰，易于维护和扩展。
灵活性： 可以根据不同的数据渲染不同的组件。
安全性： 避免了直接渲染 HTML 带来的安全风险。

缺点：

需要前后端协同设计 API 接口。

适用场景：

大多数现代 Web 应用都应该采用这种方式。

3. 使用 dangerouslySetInnerHTML (谨慎使用)

如果确实需要直接渲染 HTML，并且能够确保 HTML 内容的安全性，可以使用 dangerouslySetInnerHTML。

示例代码：

立即学习“前端免费学习笔记（深入）”；

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    fetch('https://example.com/some/v1', {
      headers: {
        'Content-Type': 'text/html',
      },
    })
      .then((response) => response.text())
      .then((data) => setHtmlContent(data))
      .catch((error) => console.error(error));
  }, []);

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

export default MyComponent;

登录后复制

注意事项：

XSS 攻击： 必须确保 HTML 内容来自可信的来源，否则可能会受到 XSS 攻击。
样式冲突： HTML 内容中的样式可能会与父页面的样式冲突。
性能问题： 大量的 HTML 内容可能会影响页面的渲染性能。

适用场景：

在完全信任的来源获取 HTML 内容的场景。
需要快速原型验证的场景。

总结

在 React 应用中渲染 HTML Partial Response 有多种方式，选择哪种方式取决于具体的场景和需求。推荐优先使用数据解耦与组件化的方式，以提高代码的可维护性和安全性。如果确实需要直接渲染 HTML，请务必谨慎使用 dangerouslySetInnerHTML，并确保 HTML 内容的安全性。使用 iframe 是一种隔离样式和脚本的有效方式，但需要注意其通信复杂性和性能开销。

以上就是在 React 中渲染 HTML Partial Response 的最佳实践的详细内容，更多请关注php中文网其它相关文章！