Quiero cargar la etiqueta Script después de cargar data.post.content dentro de HTML.
Básicamente, quiero ejecutar el script MathJax.js dentro de HTML.
Mi código:
return ( <div> <h1>{data.post.title}</h1> <p dangerouslySetInnerHTML={{ __html: data.post.content }}></p> <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/> </div> );Mi Script funciona si recargo la página
El problema aquí es que está completando Script con representación del lado del cliente (la representación del lado del servidor es buena porque los datos ya están cargados en el servidor).
Puede intentar corregirlo de esta manera (debajo del fragmento), pero de esta manera, debe configurar data.post.content en estados para volver a renderizar la interfaz de usuario
return ( <div> <h1>{data.post.title}</h1> <p dangerouslySetInnerHTML={{ __html: data.post.content }}></p> {data.post.content && <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>} </div> );