我正在嘗試將 Javascript 插件 TypeIt 用于 reactjs（版本 17.2）。即使它有 npm，我也試圖使用普通的 vanilla js 版本。
我想不通。
我使用以下鉤子將腳本注入正文
import { useEffect } from 'react';
const useScript = resourceUrl=> {
useEffect(() => {
const script = document.createElement('script');
script.src = resourceUrl;
script.async = true;
console.log(script)
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [resourceUrl]);
};
export default useScript;
在組件中，我使用以下代碼
import React, {useEffect, useRef} from 'react'
import useScript from '../../Hooks/useScript'
const TypeText = () => {
useScript('vendor/typeTextScript.js')
// useScript('https://unpkg.com/[email protected]/dist/index.umd.js')
const typeTrigger = useRef()
useEffect(()=> {
setTimeout(() => {
new TypeIt(typeTrigger.current, {
strings: "This is my string!",
speed: 75,
loop: true,
}).go();
}, 100);
},[])
return (
<>
<h1>This is a TypeText component</h1>
<p ref={typeTrigger}></p>
</>
)
}
export default TypeText
我收到以下錯誤：未定義 TypeIt。你能幫助我嗎？
uj5u.com熱心網友回復：
我不知道您為什么不想使用npm來安裝該軟體包，但您需要執行以下操作：
將type屬性添加到您的script瀏覽器會知道如何處理它
const useScript = (resourceUrl: string) => {
useEffect(() => {
const script = document.createElement("script");
script.src = resourceUrl;
script.async = true;
script.type = "text/javascript"; // you need to add this line
console.log(script);
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [resourceUrl]);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337030.html
標籤：javascript 反应