Estoy tratando de importar una página estática about.html dentro de un componente de reacción pero obtengo este error. Quiero importar varias páginas HTML estáticas.
este es mi componente
import React, { Component } from 'react'; import Page from './about.html'; var htmlDoc = {__html: Page}; export default class MyComponent extends Component { constructor(props){ super(props); } render(){ return (<div dangerouslySetInnerHTML={htmlDoc} />) }}Si desea incluir html estático en ReactJS. Debe usar el complemento html-loader si está usando un paquete web para servir su código de reacción.
En primer lugar, debe instalar el complemento html-loader. Abra su terminal y ejecute el siguiente comando:
npm install --save-dev html-loader Luego abra el archivo de configuración de su paquete web y agregue el siguiente código:
{ modules: { loaders: [ { test: /\.html$/, loader: 'html-loader' } ] } }Ahora, en su código de reacción, haga los siguientes cambios:
var htmlContent = require('path/to/html/file.html'); export default function MyComponent() { return ( <div dangerouslySetInnerHTML={ {__html: htmlContent} } /> ); }Eso es. Ahora puede usar archivos html estáticos para cargar sus archivos html en reaccionar.