使用jQuery写一个网站通知公告横向滚动（注：react组件）

前一篇文章写了用纯css3的方法写一个网站上的公告横向滚动；
本篇文章使用jQuery的方法写一个动态横向滚动公告；

ps:本jQuery写在React组件中了；由于React用的时间较短，有代码上的不规范或者不简洁的地方请见谅~

附上代码~~

备注 ：未对接后台返回数据之前静态，完全没有问题，对接后台数据后出现一些小问题（在componentDidUpdate时将textWidth指向到this上即可），详见下篇文章。

import React from "react";
import * as styles from './notice.less';
import {Icon} from "antd";
import $ from "jquery";
import {ajax} from "../../../framework/tools";


export class Notice extends React.Component{

    marquee(){
        let {addiche, text} = this;
        let scrollWidth = $(addiche).width();
        let textWidth = $(text).width();
        let i = scrollWidth;
        this.timerID = setInterval(function() {
            i--;
            if(i < -textWidth ) {
                i = scrollWidth;
            }
            $(text).animate({'left': i+'px'}, 10);
        }, 10);
    }

    loadPub =()=>{
        ajax.get('/rest/server/get/notice/pub',{},res=>{
            console.log(res);
        })
    };

    componentDidMount(){
        this.loadPub();
        this.marquee();
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    render(){
        return(
            <div ref={(ref)=>{this.addiche = ref;}} className={styles.affiche}>
                <div className={styles.affiche_icon}>
                    <Icon type="sound" />
                </div>
                <div ref={(ref)=>{this.text = ref;}} className={styles.affiche_text}>
                    系统管理员现定于2018年12月17日，对本系统维护更新，届时会停止服务器的运行，请各位使用者互相转达。谢谢配合！
                </div>
            </div>
        )
    }
}


//css（Less）部分
.affiche{
  color: red;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  text-align:left;
  line-height: 30px;

  .affiche_text{
    position: absolute;
    top: 0;
    left: 100%;
    line-height: 30px;
    display: inline-block;
    word-break: keep-all;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .affiche_icon{
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px;
    color: #2e4799;
    width: 20px;
    height: 100%;
    background: #f7f7f7;
    z-index: 20;
  }
}