无法读取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 {

  constructor(props) {

    super(props);

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

    this.elRef = React.createRef();

  }

  componentDidMount() {

    this.loading();

  }

  loading() {

    const el = this.elRef.current;

    let i = 0;

    let txt = 'Hello';

    let speed = 50;

    function typeWriter() {

      if (i < txt.length) {

        el.innerHTML += txt.charAt(i);

        i++;

        setTimeout(typeWriter, speed);

      }

    }

    typeWriter();

  }

  render() {

    return (

      <div className="about">

        <h1 ref={this.elRef} />

        <p>some text</p>

      </div>

    );

  }

}

由于Dom操纵使用虚拟DOM，因此它在使用React时比较棘手。因此，在大多数情况下，当您尝试操纵该元素时，该元素尚未呈现为实际的DOM。因此，在处理DOM元素时，您需要使用react refs React Refs或将值设置为state。但是，在您的情况下，每次弹出一个字母都会触发重新渲染，因此，refs可能是适合您情况的最佳选择。