Escribí un algoritmo para analizar y generar una tabla de contenido basada en mis archivos de rebajas. La salida de la tabla de contenido de Markdown son cadenas HTML sin procesar que configuré usando setDangerouslyInnerHTML.
const TableOfContents = ({ toc }) => { return ( <div className={post["toc"]}> <h2>Table of Contents</h2> <div dangerouslySetInnerHTML={{ __html: toc }}></div> </div> ); }; El problema es que los enlaces href estándar en los elementos li no activan movimientos de etiquetas de anclaje en la página.
Los encabezados de la página tienen un id como <h1 id="test>.. y el correspondiente
<li><a href="#test">test</a></li> no activa la navegación. Mirando en línea, sé que se recomienda <Link> , pero mi generación es dinámica y todo lo que hago es interpolar la cadena en la página, por lo que no he descubierto una manera de tener ningún JSX elegante o invocación de función incrustada en la cadena. Sin embargo, todavía estoy confundido por qué el clic HTML estándar no funcionaría.