1
votes

Reactjs rend les composants dans une boucle

Je crée un site Nextjs et j'utilise le site bibliothèque react-typist

Je veux que le texte que j'écris avec la bibliothèque dactylo s'exécute sur une boucle infinie. Voici à quoi ressemble mon composant pour le moment.

import Head from '../components/head'
import Nav from '../components/nav'
import Typer from '../components/Typer'

import '../styles/main.css'

const Index = () => {
  return (
    <div>
      <Head title="Learn Nextjs" />
      <Nav />
      <Typer />
    </div>
  )
}

export default Index

et voici mon fichier principal index.js où j'importe le composant.

import Typist from 'react-typist'

const Typer = () => {
  return (
    <Typist
      className="flex justify-center mt-10 text-2xl h-10"
      cursor={{
        show: false
      }}
    >
      <Typist.Delay ms={1000} />
      <div>Some text</div>
      <Typist.Backspace count={20} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Some more text</div>
      <Typist.Backspace count={13} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Even More Text</div>
      <Typist.Backspace count={18} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Last bit of text</div>
    </Typist>
  )
}

export default Typer

J'ai essayé de l'envelopper dans une boucle for mais cela ne semblait pas fonctionner. Dois-je remonter le composant encore et encore, si oui, comment dois-je procéder? Faites-moi savoir si vous avez besoin d'autres informations de ma part pour vous aider à comprendre cela. Merci d'avance.

javascript reactjs node.js next.js

3 commentaires

"Je veux que le texte que j'écris avec la bibliothèque dactylo s'exécute sur une boucle infinie." Si vous écrivez une boucle infinie dans votre composant, votre application se bloquera. Quel comportement voulez-vous avoir? Parlez comme "lorsque l'utilisateur ... alors l'application le fera ...". Remplissez le ... .

Oui, peut-être que la boucle infinie n’est pas le bon terme, mais je veux qu’elle se répète continuellement.

Que voulez-vous répéter? Que fait votre programme?

3 Réponses :

2
votes

J'ai vérifié leur document et j'ai trouvé ce onTypingDone

this.forceUpdate();

0 commentaires

1
votes

Je suggère qu'une autre solution consiste à tirer parti des accessoires clés

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Typist from 'react-typist'

function App() {
  const [now, setNow] = useState(new Date());
  const onTypingDone = () => setNow(new Date());
  return (
    <Typist
      className="flex justify-center mt-10 text-2xl h-10"
      cursor={{
        show: false
      }}
      onTypingDone={onTypingDone}
      key={now}
    >
      <Typist.Delay ms={1000} />
      <div>Some text</div>
      <Typist.Backspace count={20} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Some more text</div>
      <Typist.Backspace count={13} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Even More Text</div>
      <Typist.Backspace count={18} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Last bit of text</div>
    </Typist>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

0 commentaires

0
votes

J'ai donc fini par obtenir l'effet souhaité en définissant un état typingDone sur false au départ et onTypingDone j'ai passé une méthode qui change la frappe effectuée en true et retourne en false. Ensuite, j'ai utilisé un ternaire pour rendre les animations de texte chaque fois que l'état typingDone est faux. Il existe certainement un moyen plus efficace pour y parvenir, mais il a fait le travail.

import React from 'react'
import Typist from 'react-typist'

class Typer extends React.Component {
  state = {
    typingDone: false
  }
  handleTypingDone = () => {
    this.setState({
      typingDone: true
    })
    this.setState({
      typingDone: false
    })
  }

  render() {
    const { typingDone } = this.state

    return !typingDone ? (
      <Typist
        onTypingDone={this.handleTypingDone}
        className="flex justify-center mt-10 text-2xl h-10"
        cursor={{
          show: false
        }}
      >
        <Typist.Delay ms={1000} />
        <div>Full Stack Developer</div>
        <Typist.Backspace count={20} delay={200} />
        <Typist.Delay ms={1000} />
        <div>Web Developer</div>
        <Typist.Backspace count={13} delay={200} />
        <Typist.Delay ms={1000} />
        <div>Software Developer</div>
        <Typist.Backspace count={18} delay={200} />
        <Typist.Delay ms={1000} />
        <div className="animated pulse infinite">Node.js Developer</div>
        <Typist.Delay ms={3000} />
        <Typist.Backspace count={17} delay={200} />
      </Typist>
    ) : (
      <div></div>
    )
  }
}

export default Typer

0 commentaires