如何將外部 html 文件導入 React 應用程序？
[英]How to import external html file to React app?
問題描述
我有一個正在開發的項目。 我需要使用外部登陸頁面作為主頁。 因此，我需要導入登陸index.html，但它有自己的css和js文件夾（主要是Jquery代碼）。
我想將它作為<iframe src={html}></iframe>導入到我的項目中，但我的應用似乎沒有加載 html。
導入使用自己的 jquery 代碼做出反應的 html 文件的最佳方法是什么？
3 個解決方案
解決方案1
3 2020-03-16 19:50:35
這有點棘手，可能還有其他方法（也許更好）來實現相同的結果。 另外，我會考慮將多個庫加載到現有 React 應用程序中的性能影響。
有了這個不起眼的免責聲明，一種方法是使用<script>標簽將 jQuery 直接包含到 React 的主index.html頁面中，這將使$在整個應用程序中全局可用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>
完成此操作后，將登錄頁面項目文件夾（及其依賴項）放在public目錄中：
然后，使用fetch從主應用程序組件加載所需的登錄頁面，然后使用.text()將檢索到的頁面轉換為常規文本。
使用setState將檢索到的 HTML 設置為應用程序狀態，然后在render()中使用常規<div>容器存儲登錄頁面，並使用 React 屬性dangerouslySetInnerHTML在目標容器中設置 HTML。
最后，我傳遞了一個匿名函數（作為setState的第二個參數）並使用 jQuery 的getScript()來加載和執行登錄頁面所依賴的所需 JS 庫。
在示例中，我加載了啟動Carousel所需的 Bootstrap 的 JS。
Bootstrap 的 CSS 是使用標准<link>標簽直接從登錄頁面的 HTML 文件加載的。
import React from "react";
class App extends React.Component {
state = {
page: null
};
componentDidMount() {
fetch("landing-page-one/index.html")
.then(result => {
return result.text();
})
.then(page => {
this.setState(
{
page: { __html: page }
},
() => {
window.$.getScript("landing-page-one/js/index.js");
}
);
});
}
render() {
const { page } = this.state;
return (
<>
<h2>
<span>Inserting project using React's </span>
<code>dangerouslySetInnerHTML</code>:
</h2>
<div
dangerouslySetInnerHTML={page && page}
/>
</>
);
}
}
export default App;
這里的工作示例。
解決方案2
0 2022-05-11 03:51:17
我也試圖找到一個解決方案，並為不同的用例找到了兩種方法：
- 如果您的 HTML 文件包含 <div> 和其他子標簽（可以嵌套在其他 <div> 或 <body> 標簽下），那么這種方法將適用於您：
首先你需要配置 webpack 來解析 HTML 文件。 您可以使用
npm eject或使用另一個模塊react-app-rewired來做到這一點 - 然后在 overrides 中添加一個 HTML 加載器。然后導入 HTML 文件並使用解析器。 我相信這比使用
dangerouslySetInnerHTML更好。
方法 1 的示例：
const parse = require("html-react-parser");
const docs = require("../../public/redoc-static.html").default;
const ApiDocs = (props: any) => {
return (
<Box sx={{ display: "flex", height: "100vh" }}>
<Box>{parse(docs)}</Box>
</Box>
);
};
- 如果您的 HTML 文件包含 <html> 標記（是一個完整的文件），則按照上述方法會給出非常明顯的錯誤
<html> cannot appear as a child of <div>。 在這種情況下，我發現的解決方法是使用_blank在瀏覽器的不同選項卡中打開整個 HTML 文件：
方法 2 的示例：
window.open(filename, "_blank")
注意：HTML 文件必須位於項目的公共文件夾中。
解決方案3
0
我只是把它當作一個吐球來解決......我從未嘗試過，但為什么不直接替換 index.html 並且不在該頁面上呈現任何內容呢？ 您將不得不以某種方式調整構建......我不知道如何，或者在反應應用程序完成構建后手動放置它。 我敢肯定這將是一個錯誤的噩夢，但老實說，它聽起來不像 iframe 那樣麻煩，它可能會給你一些奇怪的 UI 行為。 React-Server，盡管它說的是服務器，但實際上只需要字符串化的 JSX，我認為html 會將其轉換回可行的代碼。 您也可以嘗試這種方法，但這聽起來確實像一個噩夢項目。
從反應應用程序打開外部 html 文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.