如何在 ReactJS 中呈现静态 html 页面？
Posted
技术标签:
【中文标题】如何在 ReactJS 中呈现静态 html 页面？【英文标题】：How to render a static html page in ReactJS? 【发布时间】：2019-10-14 19:18:06 【问题描述】：我正在尝试在反应中呈现 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 id="local" controls></video>
<video 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 组件，但没有帮助。所以我尝试危险地SetInnerHTML 来转换它，但它仍然给出错误。
【问题讨论】：
重复：***.com/questions/37818401/… Importing html files with es6 template string loader的可能重复 【参考方案1】：您可以将您的 HTML 静态文件转换为字符串，并使用危险的SetInnerHTML 标记将其传递给您的 div。 然后，如果您再次遇到问题，在这种情况下，您的 HTML 文件可能有一个未定义或不正确的字段。 检查您的 HTML，然后重试。
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案2】：把你的静态文件放在公用文件夹中，然后在你的路由部分放这个：
<Route exact path="/">
<Redirect push to="/home.html" />
</Route>
【讨论】：
我测试过，它可以工作。您可以添加重新加载或刷新路由。【参考方案3】：默认情况下，使用 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 id="local" controls></video>
<video 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;
【讨论】：
如果我删除 html 和 head 标签，它最初允许编译项目。但是还是不解析代码，整个页面崩溃了。 这个答案不是 100% 正确的。由于它使用了 dangerouslySetInnerHTML 它不会运行脚本标签内的代码。为了在 sciprt 标签中运行代码，我使用 react-helmet 组件。以上是关于如何在 ReactJS 中呈现静态 html 页面？的主要内容，如果未能解决你的问题，请参考以下文章