Как отобразить статическую html-страницу в ReactJS?
Я пытаюсь отобразить 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-код на реагирующий компонент, и это не помогло. Поэтому я попытался опасно SetInnerHTML преобразовать его, но он все еще дает ошибку.
Возможный дубликат Импорт html-файлов с помощью загрузчика строк шаблона es6
Ответы 3
По умолчанию импорт HTML-файла с помощью React не будет работать. Учитывая ваш вариант использования и маршрут, по которому вы хотите пойти, лучше всего будет преобразовать 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;
изначально он позволял скомпилировать проект, если я удалю теги html и head. Но он по-прежнему не анализирует код, и вся страница рушится.
Этот ответ не на 100% верен. Поскольку он использует опасно SetInnerHTML, он не запускает код внутри тегов скрипта. Чтобы запустить код внутри тегов sciprt, я использую компонент реактивного шлема.
Поместите свой статический файл в общую папку, затем в разделе маршрутизации поместите это:
<Route exact path = "/">
<Redirect push to = {"/home.html"} />
</Route>
Я проверил, и это работает. Вы можете добавить перезагрузку или обновление маршрута.
Вы можете преобразовать свой статический HTML-файл в строку и передать его в свой div с помощью тегаhazardlySetInnerHTML. Затем, если у вас снова возникнет проблема, в этом случае ваш HTML-файл может иметь поле, которое не определено или неверно. Проверьте свой HTML и повторите попытку.
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Дублирование этого: stackoverflow.com/questions/37818401/…