解决typewriter-effect在react-i18next切换语言失效问题

54 阅读1分钟

如果直接使用,组件内部会缓存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;