Estoy creando un sitio web de reacción mediante create-react-app . Tengo algunos archivos de descuento en el directorio actual. Quiero obtener una vista previa de ellos en el sitio web (como github muestra archivos de descuento en formato de vista previa). Encontré el programa de vista previa ReactMarkdown . Ahora el único código que necesito es un componente de clase/funcional de React que leerá los archivos de descuento. Probé algunas soluciones en stackoverflow pero ninguna funcionó.
Esta es mi aplicación.js
import ReactMarkdown from 'react-markdown'; import ReadFileData from './ReadFileData'; import data from './file.md'; // const data = require('./file.md'); import './App.css'; function App() { return ( <div className="App"> <ReactMarkdown><ReadFileData data={data}/></ReactMarkdown> </div> ); } export default App;He escrito una pequeña parte de ReadFileData.js . Pero no se como completarlo.
import React from "react"; class ReadFileData extends React.Component { render(){ const unparsed = this.props.data; console.log(unparsed); // The code I need const readAbleData = "unknown"; return( <div> <p>{readAbleData}</p> </div> ); } } export default ReadFileData;Puedes leerlo con fetch :
const myMarkdownFile = require("./file.md"); fetch(myMarkdownFile) .then(response => response.text()) .then(text => this.setState({ text }))