我们在react项目中的文件夹src/html下有一个HTML文件列表.现在我们需要读取HMTL文件中的菜单项，并使用React组件显示它们.HTML包含用于保存菜单项的元素，还有其他部分的内容.你能指导我从HTML到React App显示菜单的实现方式吗？
我们在react项目中的文件夹src/html下有一个HTML文件列表.现在我们需要读取HMTL文件中的菜单项，并使用React组件显示它们.HTML包含用于保存菜单项的元素，还有其他部分的内容.你能指导我从HTML到React App显示菜单的实现方式吗？
使用cheerio个库.
我从sample.html中提取了菜单项，并将它们作为props 传递给MenuComponent.
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");
const htmlContent = await response.text();
const cheerio = require("cheerio");
const $ = cheerio.load(htmlContent);
const extractedMenuItems = [];
$("nav ul li").each((index, element) => {
extractedMenuItems.push($(element).text());
});
setMenuItems(extractedMenuItems);
} catch (error) {
console.error("Error fetching or parsing HTML:", error);
}
};
fetchMenuItems();
}, []);
return (
<div>
<h1>Your React App</h1>
<MenuComponent menuItems={menuItems} />
</div>
);
};
export default App;
MenuComponent.js
import React from "react";
const MenuComponent = ({ menuItems }) => {
return (
<div>
<h2>Menu</h2>
<ul>
{menuItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
export default MenuComponent;
Sample.html(位于公共文件夹中)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample HTML</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div>
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</div>
</body>
</html>
如果你想玩这code美元