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

Question

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

8

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

- Naeem Faheem

2

重复内容：https://dev59.com/4FoU5IYBdhLWcg3wG0Oy - blaz

可能是使用ES6模板字符串加载器导入HTML文件的重复问题。 - blaz

3个回答

5

将你的静态文件放在public文件夹中，然后在你的路由部分添加以下代码：

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

- nntona

1

我进行了测试，它可以正常工作。你可以添加重新加载或刷新路由。 - nntona

请注意，在 v6 版本中，此组件称为 Navigate，而不是 Redirect。 - AfroRick

1

您可以将HTML静态文件转换为字符串，并使用dangerouslySetInnerHTML标签传递给您的div。如果再次出现问题，这种情况下，您的HTML文件可能具有未定义或不正确的字段。请检查您的HTML并重试。

- mohammadsajad

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ayodele samuel · Accepted Answer

默认情况下，使用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;