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可能是适合您情况的最佳选择。

无法读取null的属性“ innerHTML”

1 个答案: