reactjs - Error de texto con efecto de máquina de escribir en reaccionar

CorePress2024-01-25  11

Importé reaccionar-simple-typewriter en mi proyecto y las palabras en mi matriz Typewriter fallan y la primera letra de cada palabra aparece junto a mi primera oración. Quiero que mi primera línea de texto esté quieta y no se mueva y cuando la matriz de palabras={["MÚSICA", "ARTE", "TALENTO", "PUBLICACIÓN"]} desaparezca.

Aterrizaje.js

import Typewriter from "react-simple-typewriter";

<h2 id="text">
              THE FUTURE OF{" "}
              <span>
                {/* Style will be inherited from the parent element */}
                <Typewriter
                  loop
                  cursor
                  cursorStyle="_"
                  typeSpeed={60}
                  deleteSpeed={40}
                  delaySpeed={1000}
                  words={["MUSIC", "ART", "TALENT", "PUBLISHING"]}
                />
                {/* <Typist sentences={["MUSIC", "ART", "TALENT", "PUBLISHING"]} /> */}
              </span>
            </h2>


------------------------------------

Agregué inline-block para permitirme colocar el elemento de texto manteniendo el ancho y el ancho del texto. Se pueden establecer propiedades de altura, o podemos pensar en un elemento a nivel de bloque, que no tiene que comenzar con una nueva línea. rema de bloque en líneaestá en línea con todo el texto alrededor del elemento y aparece igual que en línea.

<h2 id="text">THE FUTURE OF </h2>
            <h2 id="text">
              <span
                style={{
                  display: "inline-block",
                }}
              >
                
                <Typewriter
                  loop
                  cursor
                  cursorStyle="_"
                  typeSpeed={60}
                  deleteSpeed={200}
                  delaySpeed={1000}
                  words={["MUSIC", "ART", "TALENT", "PUBLISHING"]}
                />
               
              </span>
            </h2>



------------------------------------

Después de tener muchos problemas yo también, tuve que escribir mi propio componente Typewriter totalmente compatible con Typecript y la versión más reciente de React. Simplemente instálelo con npm i react-ts-typewriter, importe usando import Typewriter desde 'react-ts-typewriter' y llámelo usando <Typewriter text="Texto de ejemplo" />o <Texto de máquina de escribir={["matrices", "también", "trabajo"]} />.

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare