如何在React组件中引入.html文件？引入后页面显示异常求助

问题原因 #

你遇到的情况是因为：

• 你的test.html没有设置viewport元标签，浏览器会默认按移动端适配规则缩放页面，导致内容在iframe里显示缩小
• HTML和body默认带有margin，加上没有设置宽高占满容器，内容会集中在小区域里
• React项目中静态HTML文件需要放在public目录下，否则相对路径./test.html可能无法正确加载（或加载后路径异常导致样式问题）

解决步骤 #

1. 修改test.html，添加适配样式和viewport #

给HTML添加head部分，设置viewport和清除默认边距：

<!DOCTYPE html>
<html>
<head>
    <!-- 强制页面按实际尺寸渲染，禁止缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        /* 清除默认边距，让页面占满iframe容器 */
        html, body {
            margin: 0;
            padding: 16px; /* 可选：加内边距让内容不贴边 */
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

2. 调整React组件的iframe配置 #

• 把test.html放到React项目的public目录下（Create React App项目的静态资源根目录）
• 修改iframe的src为根路径/test.html，确保正确加载
• 可选：给iframe加边框方便区分容器范围

修改后的组件代码：

import React from 'react';

function MapComponent() {
    return (
        <div>
            <h1>Test</h1>
            <iframe 
                src="/test.html" 
                style={{ 
                    width: '600px', 
                    height: '600px', 
                    border: '1px solid #ddd' 
                }}
            ></iframe>
        </div>
    );
}

export default MapComponent;

这样修改后，iframe里的HTML内容就会正常显示，不会再缩小了。

内容的提问来源于stack exchange，提问作者Tomas