无法读取null的属性“ innerHTML”

Question

试图在我的About类中创建一个简单的文本效果。我正在使用React来做到这一点。它不断告诉我，它无法读取属性innerHTML。

我在想它看不到render中的元素，这就是为什么它认为它为null。我该如何解决？

class About extends Component

{

  constructor(props){

    super(props)

    this.loading = this.loading.bind(this)

  }

  loading() {

    console.log('i got here')

    let i = 0;

    let txt = this.props.text;

    let speed = 50;

    function typeWriter() {

      if ( i < txt.length){

        document.getElementById("welcome").innerHTML += txt.charAt(i);

        i++;

        setTimeout(typeWriter,speed);

      }

    }

    typeWriter()

  }

    render()

    {

        return(

            <div className="about">

            <h1 id="welcome" onload = {this.loading()}></h1>

            <p>some text</p>

            </div>

        );

    }

}

我只想更改“欢迎使用”中的文本以逐个字符显示，有点像打字效果。

Answer 1

您应该使用状态或引用。然后在componentDidMount上运行您的函数，而不是使用onload函数。因此，使用refs时，它将类似于以下内容：class About extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.loading = this.loading.bind(this);&nbsp; &nbsp; this.elRef = React.createRef();&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.loading();&nbsp; }&nbsp; loading() {&nbsp; &nbsp; const el = this.elRef.current;&nbsp; &nbsp; let i = 0;&nbsp; &nbsp; let txt = 'Hello';&nbsp; &nbsp; let speed = 50;&nbsp; &nbsp; function typeWriter() {&nbsp; &nbsp; &nbsp; if (i < txt.length) {&nbsp; &nbsp; &nbsp; &nbsp; el.innerHTML += txt.charAt(i);&nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(typeWriter, speed);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; typeWriter();&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="about">&nbsp; &nbsp; &nbsp; &nbsp; <h1 ref={this.elRef} />&nbsp; &nbsp; &nbsp; &nbsp; <p>some text</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}由于Dom操纵使用虚拟DOM，因此它在使用React时比较棘手。因此，在大多数情况下，当您尝试操纵该元素时，该元素尚未呈现为实际的DOM。因此，在处理DOM元素时，您需要使用react refs React Refs或将值设置为state。但是，在您的情况下，每次弹出一个字母都会触发重新渲染，因此，refs可能是适合您情况的最佳选择。