是否有可能通过html创建一个目录以进行响应

Posted 2023-01-26

我有一个文档，想创建一个目录

<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中。我可以在使用DOM节点的javascript中执行此操作，但由于它会阻止dom操纵，因此无法做出反应。

答案

在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

生成树的算法不够简单，不足以产生堆栈溢出响应。如果您找到更简单的方法，请告诉我！

另一答案

import renderToStaticMarkup from 'react-dom/server'; import ReacthtmlParser from 'react-html-parser'; const regex = new RegExp(`(?<=<h\\d>)(.*?)(?=<)`,'g')