Estoy tratando de ejecutar el ejemplo del blog en la página de inicio de material ui . el problema es que el código fuente es:
en blog.js
import post1 from './blog-post.1.md'; . . . return( <Main>{post1}<Main/>);y en Main.js:
import ReactMarkdown from 'markdown-to-jsx'; export default function Main(props) { return <ReactMarkdown options={options} {...props} />; } si ejecuto el código, obtengo este resultado: /static/media/blog-post.1.0c315da1f0a7af641a3a.md en lugar de los datos dentro del archivo MD.
Quiero hacer lo mismo, ¿cómo puedo importar archivos MD en mi versión de crear-reaccionar-aplicación? (sin mecanografiado)
Deberá leer el objeto Markdown y luego cargarlo en el componente ReactMarkdown . Los métodos comunes para hacer esto usan fetch como intermediario. Por ejemplo:
import * as React from "react"; import ReactMarkdown from "markdown-to-jsx"; import post from "./post.md"; export default function MarkdownImport() { let [readable, setReadable] = React.useState({ md: "" }); React.useEffect(() => { fetch(post) .then((res) => res.text()) .then((md) => { setReadable({ md }); }); }, []); return ( <div> <ReactMarkdown children={readable.md} /> </div> ); }Ejemplo de trabajo: https://codesandbox.io/s/reactmarkdown-example-20vmg