react-simple-typewriter：循环不起作用

Question

当我将此 Link 中的 react-simple-typewriter 代码用于我的代码时，我没有获得所需的输出。它仅适用于单词列表的第一个单词。但我希望它会持续运行。当我重新加载时，它将显示列表中的下一个单词。我曾经改变唯一的“循环”，“loop={0}”。但没有什么对我不起作用。这是代码示例：

   const HeaderHero = () => {
      return (
        <>
          <section className="hero" id="home">
            <div className="container f_flex top">
              <div className="left top">
                <h3>Welcome to my world...</h3>
                <h1>
                  Hi, I'm <span>Samrat Alam</span>
                </h1>
                <h2>
                  a
                  <span>
                    <Typewriter
                      words={[
                        " Developer.",
                        " Learner.",
                        " Coder.",
                        " Self Believer.",
                      ]}
                      loop={0}
                      cursor
                      cursorStyle="|"
                      typeSpeed={70}
                      deleteSpeed={50}
                      delaySpeed={1000}
                    />
                  </span>
                </h2>
    
                <div className="hero_btn d_flex">
                  <div className="col_1">
                    <h4>Find With ME</h4>
                    <button className="btn_shadow">
                      <i className="fab fa-facebook"></i>
                    </button>
                    <button className="btn_shadow">
                      <i className="fab fa-linkedin-in"></i>
                    </button>
                    <button className="btn_shadow">
                      <i className="fab fa-instagram"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </>
      );
    };
    
    export default HeaderHero;

输出结果如下：

Answer 1

使用挂钩代替组件。你的情况

 import { useTypewriter } from 'react-simple-typewriter';
 import 'react-simple-typewriter/dist/index'

 const HeaderHero = () => {
 const {text} = useTypewriter({
 words: [ " Developer."," Learner."," Coder."," Self Believer.",],
 loop: 0, 
 typeSpeed: 70,
 deleteSpeed: 50,
 delaySpeed: 1000
 })
  return (
    <>
      <section className="hero" id="home">
        <div className="container f_flex top">
          <div className="left top">
            <h3>Welcome to my world...</h3>
            <h1>
              Hi, I'm <span>Samrat Alam</span>
            </h1>
            <h2>
              a
              <span>
                {text}
              </span>
            </h2>

使用 hooks 时不会获取光标和光标类型

react-simple-typewriter：循环不起作用

react-simple-typewriter: Loop does not work

loops

reactjs

typewriter