es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Hay alguna forma de renderizar HTML en react-markdown?

31 Jul, 2023 Programación

Estoy usando Tinymce para aceptar datos de Markdown del usuario. Los datos resultantes son en formato HTML. Quiero mostrar esos datos en una página. Estoy utilizando react-markdown para ello.
Puedo ver los datos en la página pero aparecen las etiquetas HTML. ¿Hay alguna forma de mostrar la página en HTML sin las etiquetas?

export default function ThePage() {
  const markdown = {
    description: "<p>Hello from the other </p>\n<p><strong>side</strong></p>",
  }

  return (
    <>
      <reactmarkdown children="{markdown.description}"></reactmarkdown>

  );
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de mostrar una página HTML en lugar de etiquetas en react-markdown. Puede utilizar la propiedad skipHtml de react-markdown para omitir la representación de las etiquetas HTML y utilizar la propiedad dangerouslySetInnerHTML para mostrar el HTML como una cadena.

    Aquí hay un ejemplo de código:

    import React from 'react';
import ReactMarkdown from 'react-markdown';

export default function ThePage() {
  const markdown = {
    description: "<p>Hola desde el otro</p>\n<p><strong>lado</strong></p>",
  }

  return (
    <>
      <reactmarkdown children="{markdown.description}" skiphtml="{true}" dangerouslysetinnerhtml="{{__html:" markdown.description}}=""></reactmarkdown>

  );
}

    Al establecer skipHtml en true, no se mostrarán las etiquetas HTML. Y al establecer dangerouslySetInnerHTML en markdown.description, se mostrará el HTML como una cadena.

Comments are closed.