React Native 模块解析失败：意外标记(1：0)您可能需要适当的加载程序来处理此文件类型,< !DOCTYPE html>

lc8prwob 于 2023-02-09 发布在 React

关注(0)|答案(1)|浏览(106)

我尝试在react组件中导入一个静态的about.html页面，但是遇到了这个错误。我想导入多个静态的HTML页面。

这是我的组件

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} />)
}}

react-native

来源：https://stackoverflow.com/questions/72478915/module-parse-failed-unexpected-token-10-you-may-need-an-appropriate-loader-t

1条答案

按热度按时间

wfveoks01#

如果你想在ReactJS中包含静态html，你需要使用html-loader插件，如果你使用webpack来提供你的react代码。
首先你需要安装html-loader插件。打开你的终端并运行以下命令：
npm install --save-dev html-loader然后打开你的webpack配置文件并添加以下代码：

{
  modules: {
    loaders: [
      { test: /\.html$/, loader: 'html-loader' }
    ]
  }
}

现在，在react代码中执行以下更改：

var htmlContent = require('path/to/html/file.html');

export default function MyComponent() {
    return (
        <div dangerouslySetInnerHTML={ {__html: htmlContent} } />
    );
}

就是这样，现在你可以使用静态html文件来加载你的html文件了。

赞(0）回复(0）举报 2023-02-09

我来回答

React Native 模块解析失败：意外标记(1：0)您可能需要适当的加载程序来处理此文件类型,< !DOCTYPE html>

1条答案

相关问题

热门标签

最新问答