跳到主要内容

useScriptTag

Script 标签注入。

Usage​

实时编辑器

// it's an example, use your types instead

declare const jQuery: any;
function Demo() {
  const [, status] = useScriptTag(
    "https://code.jquery.com/jquery-3.5.1.min.js",
  );

  const [version, setVersion] = useState(0);
  useEffect(() => {
    if (typeof jQuery !== "undefined") {
      setVersion(jQuery.fn.jquery);
    }
  }, [status]);

  return <div>jQuery version: {version}</div>;
};
结果
Loading...

API​

useScriptTag​

Returns​

readonly [HTMLScriptElement | null, UseScriptTagStatus, (waitForScriptLoad?: boolean | undefined) => Promise<boolean | HTMLScriptElement>, () => void]: 包含以下元素的元组：

  • 用来加载资源的 html 元素。
  • 资源加载状态。
  • 资源加载函数。
  • 资源卸载函数

Arguments​

参数名描述类型默认值
src资源地址string (必填)-
onLoaded资源加载完成的回调((el: HTMLScriptElement) => void) | undefined-
options可选参数UseScriptTagOptions | undefined-

UseScriptTagOptions​

参数名描述类型默认值
immediate立即加载资源booleantrue
async在 script 标签上加上 asyncbooleantrue
type脚本类型string'text/javascript'
manual手动控制加载和卸载时机booleanfalse
crossOrigin跨域属性'anonymous' | 'use-credentials'-
referrerPolicy来源属性| 'no-referrer'| 'no-referrer-when-downgrade'| 'origin'| 'origin-when-cross-origin'| 'same-origin'| 'strict-origin'| 'strict-origin-when-cross-origin'| 'unsafe-url'-
noModule在 script 标签上加上 noModuleboolean-
defer在 script 标签上加上 deferboolean-
attrs在 script 标签上添加自定义属性Record<string, string>-

UseScriptTagStatus​

Type​

export type UseScriptTagStatus = 'idle' | 'loading' | 'ready' | 'error'