ReactJs添加第三方Javascript插件

Question

我试图使用一个Javascript插件TypeIt到一个reactjs(版本17.2)。即使它有npm我试图使用普通的香草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/typeit@8.0.6/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未定义。你能帮我吗?

Answer 1

我不知道你为什么不想用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]);
};