如何在 React 应用中解析并渲染 HTML 文件中的菜单项-html教程-PHP中文网

如何在 React 应用中解析并渲染 HTML 文件中的菜单项

本文介绍如何使用 Cheerio 在 React 中读取本地 HTML 文件（如 public/sample.html），提取特定结构（如）的菜单文本，并安全渲染为 React 组件。

本文介绍如何使用 cheerio 在 react 中读取本地 html 文件（如 `public/sample.html`），提取特定结构（如 `

在 React 项目中直接解析外部 HTML 文件以提取结构化内容（如导航菜单）是一个常见但需谨慎处理的需求。由于浏览器同源策略和 React 的 JSX 渲染机制限制，不能直接 import HTML 文件或使用 innerHTML 解析（存在 XSS 风险且无法可靠选择 DOM 节点）。推荐方案是：将 HTML 文件置于 public/ 目录下，通过 fetch 获取原始文本，再借助服务端风格的轻量解析库 Cheerio 进行 DOM-like 选择与提取。

✅ 为什么用 Cheerio？
Cheerio 提供类似 jQuery 的语法（如 $('nav ul li')），但运行在客户端（通过 Webpack 或 Vite 的动态 require 兼容），不依赖真实 DOM，解析速度快、内存占用低，且完全支持 CSS 选择器——非常适合静态 HTML 内容提取。

实现步骤

安装依赖

Ainative React Sdk
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载
```
npm install cheerio
```
将 HTML 文件放入 public/ 目录（而非 src/html/）
React 的 public/ 文件夹内资源可被直接 HTTP 访问（如 fetch('/sample.html')），而 src/ 下的文件会被打包，无法以纯文本形式读取。因此请将 sample.html 移至 public/。
在组件中异步获取并解析 HTML
使用 useEffect + fetch 加载 HTML 字符串，动态引入 Cheerio（避免服务端渲染冲突），然后定位目标元素并提取文本：

// App.js
import React, { useEffect, useState } from "react";
import MenuComponent from "./MenuComponent";

const App = () => {
  const [menuItems, setMenuItems] = useState([]);

  useEffect(() => {
    const fetchMenuItems = async () => {
      try {
        const response = await fetch("/sample.html"); // 注意路径为根相对路径
        if (!response.ok) throw new Error(`HTTP ${response.status}`);

        const htmlContent = await response.text();
        const cheerio = require("cheerio");
        const $ = cheerio.load(htmlContent);

        // 精确提取 <nav> → <ul> → <li> 文本（可按需调整选择器）
        const items = [];
        $("nav ul li").each((i, el) => {
          items.push($(el).text().trim()); // .trim() 去除空格换行
        });

        setMenuItems(items);
      } catch (err) {
        console.error("Failed to load or parse menu HTML:", err);
        setMenuItems([]); // 降级为空数组，避免渲染异常
      }
    };

    fetchMenuItems();
  }, []);

  return (
    <div>
      <h1>Your React App</h1>
      <menucomponent menuitems="{menuItems}"></menucomponent>
</div>
  );
};

export default App;</li>
</ul></nav>

渲染菜单组件（安全无副作用）
MenuComponent 仅接收纯文本数组，使用标准 JSX 渲染，不执行任何 HTML 解析，规避 XSS 风险：

// MenuComponent.js
import React from "react";

const MenuComponent = ({ menuItems }) => {
  if (menuItems.length === 0) {
    return <div classname="menu-placeholder">Loading menu...</div>;
  }

  return (
    <nav aria-label="Main navigation"><h2>Navigation Menu</h2>
      <ul>
        {menuItems.map((item, index) => (
          <li key="{index}">{item}</li>
        ))}
      </ul></nav>
  );
};

export default MenuComponent;