Donc, le problème que j'ai est que j'essaie d'imprimer le textContent de ma référence toutes les 5 secondes, et cela fonctionne la toute première fois que typeWrite() est appelé à partir de componentDidMount(), mais quand il est appelé de manière récursive (en utilisant setTimeout() ), j'obtiens une erreur indiquant que this.intro.current n'est pas défini, même s'il a été défini la première fois que la fonction a été exécutée.

Je veux garder la structure relativement similaire (je ne veux pas trop la changer) car il y a d'autres choses que j'ai laissées de côté qui reposent sur cette structure.

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.intro = React.createRef();
  }

  componentDidMount() {
    this.typeWrite();
  }

  typeWrite() {
    console.log(this.intro.current.textContent);
    setTimeout(this.typeWrite, 5000);
  }
  render() {
    return (
      <div className="intro" ref={this.intro}>Text</div>
    )
  }
}
0
Ken 21 févr. 2020 à 23:21

1 réponse

Meilleure réponse

Vous devez lier votre fonction à votre composant.

  constructor(props) {
    super(props);
    this.intro = React.createRef();
    this.typeWrite = this.typeWrite.bind(this);
  }

Ou vous devez appeler votre fonction avec la fonction flèche.

  typeWrite() {
    console.log(this.intro.current.textContent);
    setTimeout(() => this.typeWrite(), 5000);
  }
1
hurricane 21 févr. 2020 à 20:26