React原生 实现公告无限滚动效果

//index.js
import React, { Component } from 'react'
import './index.less'

export default class Scroll extends Component {
    constructor(props) {
        super(props);
        this.state = {
            noticeList: [
                {
                    key: 1,
                    text: 'iPhone11挥泪降价1600元 iPhone12出道即巅峰?5G手机'
                },
                {
                    key: 2,
                    text: 'VR式体验奔驰博物馆重新开张 广东最惨的"88888"车牌'
                },
                {
                    key: 3,
                    text: '4年5队的落选秀太香了 巅峰2.6帽!力压魔兽夺最佳新秀'
                },
                {
                    key: 4,
                    text: '你好世界：寻找心中的风景 [征集]寻找中式风景禅意美'
                },
            ],
            animate: false,
        }
    }

	//页面加载的时候，设置一个永恒的定时器，1.5s后就会执行定时器中的逻辑
    componentDidMount() {
        setInterval(() => {
            this.setState({
                animate: true
            })
            this.changeAnim()
        }, 1500);
    }
	
	//在setInterval执行中，会调用该函数，在内部会设置一个一次性的定时器，每次都会将数组的第一个元素添加到数组的最后，并且将数组的第一个元素删除，
    changeAnim = () => {
        const { noticeList } = this.state
        setTimeout(() => {
            noticeList.push(noticeList[0]);
            noticeList.shift();
            this.setState({
                noticeList,
                animate: false
            })
        }, 500)
    }


    render() {
        const { noticeList, animate } = this.state;
        return (
            <div className="scrollPage">
                <div className="scrollWrapper">
                //列表根据animate 来判断是否添加anim类样式
                    <ul className={animate ? 'anim' : ''}>
                        {
                            noticeList.map((item, index) => {
                                return <li key={index}>{item.text}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }

}


//index.less
body,
html {
  padding: 0;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.scrollPage {
  margin: 100px 0 0 300px;
  .scrollWrapper {
    position: relative;
    height: 24px;
    overflow: hidden;
    ul {
      position: absolute;
      top: 0;
      left: 0;
      li {
        height: 24px;
        line-height: 24px;
      }
    }
  }
}

//动画
.anim {
  transition: all 0.5s;
  margin-top: -24px;
}

React 学习打卡，滴！！