如何避免React中iframe的src自动添加localhost:3000前缀？

在React项目中，我尝试通过以下代码向当前HTML文档添加iframe以展示另一个HTML文档内容：

display.innerHTML = '<iframe id="externalFrame" src="viewpage.html" style="width:80%; height: 700px;"></iframe><br><button class="button color" onclick="sendSelected();">Finish</button>';

当前页面运行在http://localhost:3000/，但iframe的src会自动被加上该域名前缀，变成http://localhost:3000/viewpage.html，导致加载的是当前页面而非目标页面。

我试过用C盘绝对路径指向目标HTML文档，但iframe显示空白，且这种方式不利于后续部署；用VS Code的Live Server单独托管目标HTML文档能解决问题，但需要部署两个独立页面，不符合需求。请问该如何解决？

• 将目标HTML放入React静态资源目录
  React项目的public目录是静态资源的默认存放位置，部署时会完整复制到构建产物中。把viewpage.html放到项目根目录的public文件夹下，此时iframe的src写viewpage.html就会正确指向目标页面，而非当前页面。

• 使用React的PUBLIC_URL变量指定路径
  如果需要适配不同的部署根路径，可以在src中写/%PUBLIC_URL%/viewpage.html，React会自动将%PUBLIC_URL%替换为项目的部署根路径，避免路径解析错误。

• 改用React组件方式渲染（推荐）
  直接操作innerHTML不符合React数据流规范，容易引发路径和事件绑定问题。建议用组件方式实现：

  function IframeView() {
    const sendSelected = () => {
      // 实现sendSelected的逻辑
    };
  
    return (
      <>
        <iframe 
          id="externalFrame" 
          src="/viewpage.html" 
          style={{width: '80%', height: '700px'}}
        />
        <br />
        <button className="button color" onClick={sendSelected}>Finish</button>
      </>
    );
  }
  

  这种方式既解决路径问题，又能更好地和React状态管理结合。

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