我正在撰寫一個“服務條款”頁面ReactJS，我的想法是tos-text.txt在構建時復制組件中檔案的內容，以避免在頁面打開時獲取時間。我嘗試如下，但效果不佳：
<h2>Terms of Service</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in scelerisque odio, sed
consequat ante. Donec lectus tortor, ullamcorper quis risus nec, cursus hendrerit libero. In hac
habitasse platea dictumst. Quisque et posuere urna. Suspendisse convallis faucibus nulla, non
egestas libero aliquet non. Donec tincidunt purus sed sem suscipit feugiat. Pellentesque rutrum
blandit gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Pellentesque erat urna, lobortis sed turpis a, aliquet aliquet lorem. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quis
nibh et mi ullamcorper mattis eu eget lectus.
</p>
import { Container } from 'react-bootstrap'
// Page content
import TosText from 'config/tos-text.txt'
// --- Terms of Service ---
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<div dangerouslySetInnerHTML={{ __html: TosText }} />
</Container>
)
}
export default Tos
目前該頁面僅顯示生成的 txt 檔案 ( /static/media/tos-text.dc220bee.txt)的鏈接。
編輯：
正如@jsejcksn 建議的（
內容將是滾動的，如果它不默認適合<embed>盒-但你可以使用樣式或控制其大小width和height屬性。
使用<iframe>：
將您的靜態檔案移動到您的應用程式的公共檔案夾，并將擴展名更改為.html，然后簡單地鏈接到它：
const Tos = () => {
return (
<Container className="flex-grow-1 tos">
<iframe title="Terms of Service" src="./tos-text.html" />
</Container>
)
}
這應該是這樣的：
同樣，這只是默認外觀，您可以通過樣式更改它。
您還可以使用<embed>第二種方法（公共檔案夾中的檔案）：
<embed type="text/html" src="./tos-text.html" />
你可以在 codeandbox 上看到一個活生生的例子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/370213.html