Почему я получаю ошибку «не определено» из функции, взятой из школ W3?

Question

Я играю с идеей создания эффекта пишущей машинки для личного проекта, поэтому я перешел к статье W3 по адресу https://www.w3schools.com/howto/howto_js_typewriter.asp и взглянул на функцию, которую они дали.Я подключил его к своему проекту React, но получаю сообщение «typeWriter не определен», и я не уверен, почему.Мне кажется странным, что функция вызывает себя изнутри.

Вот как это выглядит в моем компоненте React:

import React, {Component} from 'react';

class Hero extends Component {

    componentDidMount = () =>{
        this.typeWriter();

    }

    typeWriter = () => {
        let i = 0;
        let message = 'I want to hike';
        let speed = 50;

        if(i < message.length){
            document.getElementById('typewriter-effect').innerHTML += 
message.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        }
    }

    render(){
        return (
            <div className='banner-container'>
                <h1>iHike</h1>
                <h3>Find your adventure</h3>
                <p id='typewriter-effect'></p>
            </div>
        )
    }
}

export default Hero;

Answer 1

Вот, пожалуйста, он состоит из рабочего решения.Надеюсь, вы сможете определить, что вам не хватало: D ... вам не хватало this.typewriter в setTimeout, а также объявление i.

Добавлено рабочее решение https://codesandbox.io/s/71npv01n1q

import React, {Component} from 'react';

let i = 0;
export default class Hero extends Component {

        componentDidMount = () =>{
            this.typeWriter();

        }

        typeWriter = () => {
            const message = 'I want to hike today in Mountain';
            const speed = 50;
            if(i < message.length){
                document.getElementById('typewriter-effect').innerHTML += 
    message.charAt(i);
                i++;
                setTimeout(this.typeWriter, speed);
            }
        }

        render(){
            return (
                <div className='banner-container'>
                    <h1>iHike</h1>
                    <h3>Find your adventure</h3>
                    <p id='typewriter-effect'></p>
                </div>
            )
        }
    }