跳至主要内容

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}</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'