问可以从html在react中创建目录吗？

EN

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格式之间进行转换。

在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

生成树的算法还不够简单，无法处理堆栈溢出响应。如果你找到了更简单的方法，请告诉我！