Как сделать статическую HTML-страницу в ReactJS? - PullRequest
0 голосов
/ 29 мая 2019

Я пытаюсь сделать HTML-страницу в реакции.Я пробовал несколько решений, но все равно получаю ошибку.Да, я знаю, что есть много вопросов, похожих на этот, но ни одно из этих решений не помогло мне.Я использую responsejs в качестве внешнего интерфейса и просто пытаюсь показать статическую 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-код в компонент реагирования, но это не помогло.Поэтому я попытался опасно SetInnerHTML, чтобы преобразовать его, но он все еще дает ошибку.

1 Ответ

2 голосов
/ 29 мая 2019

По умолчанию импорт HTML-файла с реагированием не будет работать.Учитывая ваш вариант использования и маршрут, по которому вы хотите пойти, лучше всего будет преобразовать HTML-страницу в файл js, а затем экспортировать, например:

html.js file

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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...