Как я могу поместить/вызвать файл .html внутри компонента React?
Я пытаюсь включить базовый файл .html, чтобы провести несколько тестов в своем проекте. Проблема в том, что когда я включаю его и вызываю представление, которое должно отображать его в центре страницы, я вижу ту же страницу, что и У меня есть, но поменьше.
Это базовый файл .html:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Это мой компонент реагирования
import React from 'react';
function MapComponent() {
return (
<div>
<h1>Test</h1>
<iframe src = "./test.html" style = {{ width: '600px', height: '600px' }}>.
</iframe>
</div>
);
}
export default MapComponent;
И вот что показывает браузер:
Кто-нибудь знает, что происходит?
На вкладке «Сеть» я вижу запрос к файлу, и он прошел успешно.
И каков ответ на этот запрос? Если ответом является показанная страница, то показанный код работает должным образом.
Ответ — статус 304, но если я открою этот файл, он покажет мне имеющуюся у меня страницу, я этого не понимаю. Если у меня есть файл .html с двумя <h1>, почему, когда я открываю запрошенный мной файл, я увидеть другую страницу?
Если сервер возвращает неправильную страницу в ответ на этот запрос, похоже, проблема на стороне сервера. Показанный код всего лишь отправляет запрос и отображает результат этого запроса, и он делает это успешно.
Но серверной части нет, файл .html лежит в папке
В инструментах отладки вашего браузера, когда <iframe> выполняет запрос test.html, какой полный URL-адрес запрашивается? Если вы не используете какой-либо веб-сервер и полагаетесь на file:// URL-адреса, то это будет очень ограничивать вас, и вам обязательно захочется начать использовать веб-сервер для разработки.
Привет @Tomas, ты пробовал описанное здесь решение? stackoverflow.com/a/78438406/8997321
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам не нужен относительный src. Вместо этого используйте импорт:
import test from "test.html";
Чтобы отобразить содержимое файла test.html, выполните одно из следующих действий:
- Используйте опасноSetInnerHTML:
<div dangerouslySetInnerHTML = {{ __html: page }} /> - Закодируйте контент с помощью
encodeURIComponentи объедините его с iframe:<iframe src = {"data:text/html," + encodeURIComponent(page)} width = {300} height = {300} />
Примечание: используйте опасноSetInnerHTML только в том случае, если у вас есть хороший контроль над содержимым, иначе это подвергнет ваших пользователей атаке с использованием межсайтовых сценариев (XSS).
Позвольте мне протестировать этот код завтра утром и сказать вам, работает ли он, большое спасибо!
Привет еще раз и извините, я не смог попробовать это сегодня утром, я пробую сейчас. Это идеальное решение, оно работает! Большое спасибо!
В инструментах отладки браузера на вкладке сети действительно сделан запрос на
test.html? Если сервер возвращает неправильную страницу в ответ на этот запрос, похоже, проблема на стороне сервера.