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

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 以及使用的模板字符串，因此您可以通过以下方式在您的反应页面中调用它：

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>