Question

我正在尝试在个人项目上使用打字机效果，所以我在https://www.w3schools.com/howto/howto_js_typewriter.asp上看了W3文章并看了他们给出的功能。我把它插入到我的React项目项目中，但是收到的消息是“typeWriter未定义＆＃39;而且我不确定为什么。对我来说，这个函数从内部调用自己看起来很奇怪。

以下是它在我的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 ...你在setTimeout中缺少this.typewriter并且还声明了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>
            )
        }
    }

为什么我会得到一个未定义的＆＃39;来自W3学校的功能错误？

1 个答案: