reactjs 为什么我在React.js中使用ityped包后会得到双字母？

vjhs03f7 于 2023-04-11 发布在 React

关注(0)|答案(4)|浏览(111)

在我的react.js网站上使用ityped包时，它显示的是双字母而不是一个字母。https://ibb.co/pd6GmHQ在没有backDelay和backSpeed的情况下运行一次时，它只显示一个字符，运行得很好。在删除backDelay和backSpeed后，它不能正常运行，即显示两位数。如果这是一个愚蠢的问题，我很抱歉，我是新手。这是我的jsx文件：

import React, { useEffect, useRef } from 'react'
import "./intro.scss"
import { init } from 'ityped'

export default function Intro() {

  const textRef = useRef();

  useEffect(()=>{
    init(textRef.current,{
      showCursor: true,
      backDelay: 1500,
      backSpeed:60,
      
      strings: ["Developer","Designer","Content Creator"],
    });

  },[]);

  return (
    <div className="intro" id="intro">
        <div className="left">
          <div className="imgContainer">
            <img src="assets/smit.jpg" alt="" />
          </div>
        </div>
        <div className="right">
          <div className="wrapper">
            <h2>Hi there, I'm</h2>
            <h1>Smit Thakkar</h1>
            <h3>Freelance <span ref ={textRef}></span></h3>
          </div>
          <a href="#probackground">
          <img src="assets/down.png" alt="" />
          </a>
        </div>
    </div>
  )
}

reactjs

来源：https://stackoverflow.com/questions/71991232/why-am-i-getting-double-letters-after-using-ityped-package-in-react-js

4条答案

按热度按时间

eni9jsuy1#

你可以使用Typewriter代替ityped。只需安装它为npm install typewriter-effect。导入它从'typewriter-effect'导入Typewriter;然后在html标签之间使用它，如span或h1。

<Typewriter 
           
           options={{ 
           strings:["Developer", "Designer", "Content Creater"],
           autoStart:true,
           delay:75,
           loop:true
           }}
           
           />

赞(0）回复(0）举报 2023-04-11

hjqgdpho2#

我今天面临这个问题，但当我删除了stricked模式，它的工作
之前：

<React.StrictMode>
    <App />
  </React.StrictMode>

之后：

<App/>

赞(0）回复(0）举报 2023-04-11

cs7cruho3#

重复问题是两个主要因素的组合：
1.)这个ityped包在DOM级别上运行，这在React中是不鼓励的，因为它使用了一个虚拟DOM，期望通过更新React状态来更新。虽然这个包 * 可以 * 并且 * 确实 * 工作，但你会发现它在使用StrictMode和useEffect时重复-在开发中，严格模式调用useEffect两次;结果，调用init两次。
2.)它复制的另一个原因是因为它使用的setInterval在热重载时没有被清理，所以每次你对组件进行更改时，它都会复制init的功能，如here所示（对App.js文件进行任何更改，注意每次热重载发生时都会出现一个新的init示例;在这一点上，这个例子使用了一个isLoading全局变量，我非常不鼓励在你的项目中使用）。
按层次顺序排列的建议：
A.）根本不要使用该软件包。
B.）不要使用这个包，而是使用React状态/React生命周期来开发相同的功能，这将在热重载/组件卸载时清理自己。
C.）使用该包并处理开发中的重复，但要知道这 * 可能 * 不会在生产中发生。尽管......该包在组件卸载时不做任何清理的事实应该令人不安，并可能导致MPA出现问题（多页应用），其中组件被卸载/重新装载--这可能会导致生产中的重复问题。我对element没有任何防范措施，所以它将是throw errors as well。