React gets and sets the virtual DOM

React, here we go.

React features what’s called the virtual DOM. The virtualizer exists only in logical operations, not in physics. So, to get or set the DOM, the old document.getelementById () method doesn’t work. Ref should be used.

There is code and there is truth

/** * jump to the front of the website */
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import styles from './index.less';// Self-defined style files

 class Jump extends Component {

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {
      let self = this;// Save this pointer. Otherwise, in a subfunction, this might point to something different.
      this.loopData(self);
    }
  
    componentWillUnmount() {
      // clearTimeout(this.timer);
    }
  
    loopData = (self) = > {
      var timer = setInterval(function () {
        var token = localStorage.getItem('token');
        if(! token) {return;
        }
        clearInterval(timer);

		// Display the read token value in 
		// This span is called the virtual DOM
        let mySpan = self.refs["spToken"],
        mySpanDOM = ReactDOM.findDOMNode(mySpan);        
        mySpanDOM.innerHTML = token;
      }, 500);
    };

    render() {
      return (
        <>
          <div>
            <span className={styles.normal}>Login, please wait...</span>
          </div>
          <div>
            <span ref="spToken" className={styles.normal}></span>
          </div>
        </>); }}export default Jump;
Copy the code