在模态 Nextjs 中显示 HTML 文件

问题描述 投票：0回答：1

我有一个 html 文件，看起来像这样，它很长，我只是向您展示其中的一小部分：


<body lang=EN-US style='word-wrap:break-word'>

<div class=WordSection1>

<p align=center style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;
margin-left:0in;text-align:center'><b><span style='font-size:14.0pt;font-family:
"Segoe UI",sans-serif;color:#172B4D;letter-spacing:-.05pt'>&#304;stifad&#601;
&#351;&#601;rtl&#601;ri raz&#305;l&#305;q anla&#351;mas&#305;</span></b></p>


<p align=center style='margin-top:0in;margin-right:0in;margin-bottom:12.0pt;
margin-left:0in;text-align:center'><strong><span lang=AZ-LATIN
style='font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#172B4D;
letter-spacing:-.05pt'>(Xidm&#601;t &#351;&#601;rtl&#601;ri v&#601;
M&#601;xfilik siyas&#601;ti)</span></strong></p>
</div>
</body>

我的一个组件中有一个

modal
，我需要显示这个
html
内容，它基本上是一些样式文本，在这个模式中没有任何功能。 我尝试将此 html 文件保存在我的 
public
文件夹或 
src
文件夹中。但即使当我尝试导入文档时，它也看不到它或导入它。我需要一个简单的方法来解决这个问题

javascript html css next.js modal-dialog
1个回答
0
投票

最简单的方法之一（根据你的喜好）可能是 React 的 

dangerouslySetInnerHTML
。

您可以将外部 html 内容作为纯文本导入，然后将其设置到 div 中。这是样本。

function createMarkup() {
  // Read your html content here.
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html

顾名思义，这样做是危险的。所以使用时要谨慎。

使用时应格外小心！如果里面的 HTML 不可信（例如 例如，如果它基于用户数据），您就有引入 XSS 的风险 脆弱性。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.