En mi aplicación de reacción, obtengo datos de una base de datos y los muestro en la página web. Uno de los datos, docs.description es una cadena como esta "Click this link <a href='www.example.com'>Example</a>" .
Actualmente, todo lo que he intentado es simplemente imprimir la cadena completa o simplemente no funciona. Quiero mostrar el texto en el sitio con los enlaces interpretados y mostrados como deberían ser los enlaces, como: Haga clic en este enlace Ejemplo
Aquí está la sección de código si ayuda
export const DocContainer: FC<{docs: AssetDocs}> = ({docs}) => { return ( <div className={styles.docContainer}> <Text h2 style={{color:"#26ff91"}}>Docs</Text> {docs && docs.description} </div> ); }¡Cualquier ayuda sería muy apreciada! Por favor, hágamelo saber si necesita más detalles.
En realidad, hay 2 formas de hacer esto
El primero es el useRef que le dará una referencia de un elemento HTML (en su caso, sería el div principal) que puede usar como si estuviera en JS simple.
TL; DR puede acceder al accesorio innerHTML
const ref = useRef(); return <div ref={ref}> // stuff goes here </div> O puede usar el prop dangerouslySetInnerHTML SetInnerHTML React
return <div dangerouslySetInnerHTML={{ __html: "YOUR_HTML_STRING" }}></div>Esto debe desinfectarse antes de usarlo, ya que puede recibir cualquier tipo de ataque de inyección.
Personalmente, no lo he usado, pero encontré este paquete que haría el trabajo y es moderadamente popular.
Combinando todos los aportes valiosos de todos, pude crear lo que creo que es una solución segura usando dangerouslySetInnerHTML combinado con sanitizeHtml
import { Text } from "@zeit-ui/react"; import React, { FC } from "react"; import styles from "./styles.module.css" import { AssetDocs } from "./types"; import sanitizeHtml from "sanitize-html" export const DocContainer: FC<{docs: AssetDocs}> = ({docs}) => { const createMarkup = () => { if (docs.description) return {__html: sanitizeHtml(docs.description)}; } return ( <div className={styles.docContainer}> <Text h2 style={{color:"#26ff91"}}>Docs</Text> <div dangerouslySetInnerHTML={createMarkup()} /> </div> ); }¡Gracias a todos!