如果直接使用,组件内部会缓存typewriter,导致语言切换失败,只需要在语言切换的时候,重载组件则可以重新触发onInit方法,如下:
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Typewriter, { TypewriterClass } from "typewriter-effect";
const TypewriterComp = () => {
const { t,i18n } = useTranslation();
const onInit = useCallback((typewriter:TypewriterClass) => {
typewriter
.typeString(`${t("6hnSr_FkCM6N5OCBbx1_i", {v: '<strong style="color: #FF9608;">HOPE</strong>'})}`)
.pauseFor(300)
.typeString(t("0j-EFljnTtZ6HUt054kz7"))
.pauseFor(10000)
.start();
},[i18n.language]);
const [toggleShow, setToggleShow] = useState<boolean>(true);
useEffect(()=>{
setToggleShow(false);
setTimeout(() => {
setToggleShow(true);
}, 500);
},[i18n.language])
return (
<>
{
toggleShow && <Typewriter
options={{
loop: true,
}}
onInit={onInit}
/>
}
</>
);
};
export default TypewriterComp;