可以从html在react中创建目录吗？
我有一份文档，想创建一个目录
<h1>heading 1</h1>
<section>content</section>
<h2>heading 2</h2>
<section>content</section>
<h2>heading 2</h2>
<section>content</section>
<h3>heading 3</h2>
<section>content</section>
<h2>heading 2</h2>所以所有的h2和h3都应该嵌套在h1中，所有的h3都应该嵌套在h2中。我可以在javascript中做到这一点，因为我在javascript中使用了DOM节点，但在react中却无法绕过它，因为它不鼓励dom操作。
回答 2
Stack Overflow用户
发布于 2020-04-25 17:38:03
import { renderToStaticMarkup } from 'react-dom/server';
import ReactHtmlParser from 'react-html-parser';
const regex = new RegExp(`(?<=<h\\d>)(.*?)(?=<)`,'g')好的。我所做的是使用renderToStaticMarkup和正则表达式来检索标题标记。
ReactHtmlParser用于将html字符串呈现给JSX。所以我们的想法是在html字符串和JSX格式之间进行转换。
Stack Overflow用户
发布于 2020-04-24 15:02:46
在React中，您应该创建对该节点的引用，并调用nodeRef.current.querySelectorAll("h2,h3,h4,h5,h6")来检索该节点中的标题。这将是React获取所需数据的方式。您不是在操作DOM，而是抓取包含节点。如果您使用的是钩子兼容版本的react，我建议使用useRef作为引用容器节点的最简单方法。
有了它之后，您就可以为节点数据创建一个树，如果您想要在目录的嵌套unordered list中显示节点数据，则主要需要这样做。
我为此创建了一个钩子。您可以使用check out the source for ideas或使用npm package。
这个钩子只生成目录所需的数据，但是自述文件中有一个关于如何呈现它的simple example using recursion。Here's the live example on github pages
生成树的算法还不够简单，无法处理堆栈溢出响应。如果你找到了更简单的方法，请告诉我！
https://stackoverflow.com/questions/61355196
复制相似问题
腾讯云开发者
