Question

我正在尝试渲染一个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>

我在做错什么吗？我知道危险地SetInnerHTML不是解决问题的最佳方法，但是我试图将上述html代码更改为react组件，但没有帮助。所以我很危险地尝试SetInnerHTML对其进行转换，但它仍然给出错误。

Answer 1

默认情况下，无法导入带有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;

Answer 2

将您的静态文件放在公共文件夹中，然后在您的路由部分中输入：

<Route exact path="/">
   <Redirect push to={"/home.html"} />
</Route>

如何在ReactJS中呈现静态HTML页面？

2 个答案: