如何在ReactJS中呈现静态html页面？
我正在尝试在react中呈现一个html页面。我已经尝试了多种解决方案，但仍然收到错误。是的，我知道有很多类似这个问题的问题，但这些解决方案对我来说都不起作用。我使用reactjs作为前端，只是想显示一个静态的html页面。
html文件如下：
<!DOCTYPE html>
<html>
<head>
<title>Ably WebRTC Video call Demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
</head>
<body>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.js"></script>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.1.2/simplepeer.min.js"></script>
<script src="ably-screenshare.js"></script>
<script src="connection-helper.js"></script>
<div class="container-fluid" style="margin-top: 5em;">
<div class="container" id="join">
<h4 id="online">Users online (0)</h4>
<ul id="memberList"></ul>
</div>
<div class="container" id="call" style="display:none;">
<video width="320" height="240" id="local" controls></video>
<video width="320" height="240" id="remote" controls></video>
<button class="btn btn-xs btn-danger" onclick="handleEndCall()">
End call
</button>
</div>
</div>
</body>
<style>
small {
border-bottom: 2px solid black;
}
li {
list-style: none;
}
</style>
</html>我尝试的解决方案是
import React, { Component } from "react";
var __html = require("./screen.html");
var template = { __html: __html };
class ScreenShare extends Component {
render() {
return (
<div className="screen-share">
<span dangerouslySetInnerHTML={template} />
</div>
);
}
}
export default ScreenShare;即使使用上面的解决方案，我也会得到这个错误
./src/components/screenShare/screen.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
|
| <html>我是不是做错了什么？我知道dangerouslySetInnerHTML不是解决这个问题的最好方法，但是我试着把上面的html代码改成react组件，但是没有什么帮助。因此，我尝试dangerouslySetInnerHTML转换它，但它仍然给出错误。
回答 3
Stack Overflow用户
发布于 2019-05-29 20:50:44
默认情况下，使用react导入HTML文件将不起作用。给定您的用例和您想要走的路线，最好的方法是将HTML页面转换为js文件，然后导出，例如：
html.js文件
module.exports = `<!DOCTYPE html>
<html>
<head>
<title>Ably WebRTC Video call Demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
</head>
<body>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.min.js"></script>
<script src="https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.js"></script>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/9.1.2/simplepeer.min.js"></script>
<script src="ably-screenshare.js"></script>
<script src="connection-helper.js"></script>
<div class="container-fluid" style="margin-top: 5em;">
<div class="container" id="join">
<h4 id="online">Users online (0)</h4>
<ul id="memberList"></ul>
</div>
<div class="container" id="call" style="display:none;">
<video width="320" height="240" id="local" controls></video>
<video width="320" height="240" id="remote" controls></video>
<button class="btn btn-xs btn-danger" onclick="handleEndCall()">
End call
</button>
</div>
</div>
</body>
<style>
small {
border-bottom: 2px solid black;
}
li {
list-style: none;
}
</style>
</html>`;在这里，注意module.exports，以及使用的模板字符串，所以您可以这样在react页面中调用它：
import React, { Component } from "react";
var __html = require('./index.html.js');
var template = { __html: __html };
class ScreenShare extends Component {
render() {
return (
<div className="screen-share">
<span dangerouslySetInnerHTML={template} />
</div>
);
}
}
export default ScreenShare;Stack Overflow用户
发布于 2020-12-27 17:37:56
将静态文件放在公用文件夹中，然后在路由部分中放入以下内容：
<Route exact path="/">
<Redirect push to={"/home.html"} />
</Route> Stack Overflow用户
发布于 2021-10-11 08:05:25
您可以将您的HTML静态文件转换为字符串，并将其传递给带有dangerouslySetInnerHTML标记的div。如果您再次遇到问题，在这种情况下，您的HTML文件可能有一个未定义或不正确的字段。请检查您的HTML并重试。
https://stackoverflow.com/questions/56356133
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号