React implements infinite loop scrolling information

This article shares the specific code of react to achieve infinite loop scrolling information for your reference. The specific content is as follows

need

The data transmitted from the backend is displayed in a scrolling manner. The scrolling stops when the mouse moves in and continues when the mouse moves out. Please refer to the announcement information column of the company portal.

Implementation ideas

Idea 1

Define a timer in componentDidMount, trigger an event every 1000ms, push the first data in the array into the array, delete the first data, and finally add onMouEnter and onMouseLeave events to div, clear the timer when the mouse moves in, and restart the timer when the mouse moves out.

Code:

class Roll extends React.Component{
  
  state = {
    list: [
      { title: 'Quiet Night Thoughts' },
      { title: 'Tang-Li Bai' },
      { title: 'Bright moonlight in front of the window' },
      { title: 'I think it's frost on the ground' },
      { title: 'Look up at the bright moon' },
      { title: 'Looking down and thinking of my hometown' },
    ]
  }

  componentWillMount = () => {
    this.begin()
  }

  roll = () => {
    let arr = this.state.list;
    arr.push(this.state.list[0])
    arr.splice(0,1)
    this.setState({
      list: arr,
    })
    console.log(this.state.list);
  }

  begin = () => {
    this.timer = setInterval(() => {
      this.roll()
    }, 1000);
  }

  stop = () => {
    clearInterval(this.timer)
  }

  render () {
    return (
      <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'>
        {this.state.list.map(item => {
          return (
            <p>
              {item.title}
            </p>
          )
        })}
      </div>
    )
  }
}

Effect picture:

It can be seen that the implemented effect is not good, and there is no upward shift effect, so the second idea came up.

Idea 2

Based on idea 1, make modifications and define a timer in componentDidMount. Each time it shifts upward by a few px, when it shifts to a certain distance, push the first data in the array into the array, then delete the first data, and finally add onMouEnter and onMouseLeave events to div.

js file

class Roll extends React.Component{

  state = {
    list: [
      { title: 'This is message 1' },
      { title: 'This is message 2' },
      { title: 'This is message 3' },
      { title: 'This is message 4' },
      { title: 'This is message 5' },
      { title: 'This is message 6' },
      { title: 'This is message 7' },
      { title: 'This is message 8' },
      { title: 'This is message 9' },
    ],
    count: 0,
  }

  // Start the timer when the page is mounted componentDidMount = () => {
    this.begin()
  }

  // Timer begin = () => {
    this.timer = setInterval(() => {
      this.Roll()
    }, 10);
  }

  // Turn off the timer stop = () => {
    clearInterval(this.timer)
  }

  // Each time the offset is 0.5px, use state to store the number of offsets Roll = () => {
    this.setState({
      count: this.state.count+1
    })
    this.refs.roll.style.top = -0.5*this.state.count+'px';
    // When the offset reaches 40px, cut the first data in the array to the end of the array, and then subtract the number of offsets corresponding to the height of a row if(-0.5*this.state.count <= -40){
      let arr = this.state.list;
      arr.push(this.state.list[0])
      arr.splice(0,1);
      this.setState({
        list: arr,
        count: this.state.count - 50,
      })
      this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px'
    }
    
  }

  render(){
    return (
      <div className="box" onMouseEnter={this.stop} onMouseLeave={this.begin}>
        <div className="content" ref='roll'>
          {this.state.list.map((item)=>{
            return (
              <p className='row'>
                <a href="#" rel="external nofollow" >
                  {item.title}
                </a>
              </p>
            )
          })}
        </div>
      </div>
    )
  }
}

css file

.box{
  width: 300px;
  height: 160px;
  border: 1px solid black;
  margin: 200px 300px;
  position: relative;
  overflow: hidden;
}

.content{
  position: absolute;
  top: 0px;
}

.row{
  height: 20px;
  margin: 5px auto;
}

Effect picture:

Get Node

1.document gets the node

I never thought that I could use document to get element nodes in react, just like in js.

2. Refs acquisition

Get it through this.refs.xxx

componentDidMount = () => {
        console.log(this.refs.test);
    }

    render () {
        return (
            <div ref='test'>
                123
            </div>
        )
    }

3. findDOMNode to obtain

Get it through ReactDom.findDOMNode(this)
this is the instance of the current component

componentDidMount = () => {
    console.log(ReactDom.findDOMNode(this));
  }

  render () {
    return (
      <div className='test'>
        123
      </div>
    )
  }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: