如何在 React 组件中放置/调用 .html 文件？

Question

我试图包含一个基本的 .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;

这是浏览器显示的内容：

有人知道发生什么事吗？

Answer 1

您不需要相对的src。使用 import 代替：

import test from "test.html";

要显示 test.html 文件的内容，可以：

使用dangerouslySetInnerHTML：

<div dangerouslySetInnerHTML={{ __html: page }} />

用

encodeURIComponent

对内容进行编码，并与iframe结合：

<iframe src={"data:text/html," + encodeURIComponent(page)} width={300} height={300} />

旁注：仅当您对内容有良好的控制时才使用 dangerouslySetInnerHTML，否则会使您的用户遭受跨站脚本 (XSS) 攻击。

如何在 React 组件中放置/调用 .html 文件？

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

1个回答

最新问题

如何在 React 组件中放置/调用 .html 文件？

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

1个回答

最新问题

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