我正在尝试在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 来转换它,但仍然出现错误。