如何在SolidJS中使用iframe组件？第三方包报错及替代方案咨询

一、先卸载那个出问题的iframe包 #

你下载的iframe包是给Node.js环境用的工具，并非前端框架的组件，在SolidJS里引入它必然会引发bug，直接执行卸载命令即可：

npm uninstall iframe

二、直接用原生iframe标签（最简便的方案） #

SolidJS支持直接使用所有原生HTML元素，完全不需要额外安装组件包，把你的代码改成下面这样就能正常运行：

export default function SearchEngine() {
  return (
    <div>
      <iframe 
        src="http://gkwhelps.herokuapp.com" 
        width="100%" 
        height="657px"
        // 可按需添加其他原生属性，比如去除边框、允许全屏等
        frameBorder="0"
        allow="fullscreen"
      />
    </div>
  )
}

三、有没有类似react-iframe的SolidJS专用模块？ #

目前没有热门的官方或社区维护的SolidJS专用iframe组件包——因为原生iframe已经能满足绝大多数场景需求。如果需要封装加载状态、错误处理这类额外功能，可以自己简单写个封装组件：

import { createSignal } from 'solid-js';

function SolidIframe(props) {
  const [isLoading, setIsLoading] = createSignal(true);
  const [hasError, setHasError] = createSignal(false);

  return (
    <div>
      {isLoading() && <div>加载中...</div>}
      {hasError() && <div>加载失败，请重试</div>}
      <iframe
        {...props}
        onLoad={() => setIsLoading(false)}
        onError={() => {
          setIsLoading(false);
          setHasError(true);
        }}
      />
    </div>
  );
}

// 使用方式和原生iframe一致
export default function SearchEngine() {
  return (
    <div>
      <SolidIframe 
        src="http://gkwhelps.herokuapp.com" 
        width="100%" 
        height="657px"
      />
    </div>
  )
}

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