react 文字跑马灯从左往右滚动鼠标移入移出控制

本人React用的时间较短，有代码上的不规范或者不简洁的地方请见谅~
附上代码~~

import React from “react”;
import * as styles from ‘./notice.less’;
import {Icon} from “antd”;
import $ from “jquery”;

state = {
Notice: ‘我是一条公告！！！’,
}

componentDidMount() {
this.marquee(this.state.Notice);
}

componentWillUnmount() {
if(this.state.timer!= null) {
clearInterval(this.state.timer);
}
}

marquee = message =>{
if(message!=’’ ){
let {addiche, text} = this;
let scrollWidth = $(addiche).width();
let textWidth = $(text).width();
let i = scrollWidth;
this.state.timer = setInterval(function() {
i–;
if(i < -textWidth ) {
i = scrollWidth;
}
// $(text).animate({‘left’: i+‘px’}, 10);
$(text).css(‘left’, i+‘px’);
}, 20);
}
}

onMouseOverText(){
if(this.state.timer!= null) {
clearInterval(this.state.timer);
}
};

onMouseLeaveText(){
let {addiche, text} = this;
let scrollWidth = $(text).offset().left;
let textWidth = $(text).width();
let i = scrollWidth;
this.state.timer = setInterval(function() {
i–;
if(i < -textWidth ) {
i = $(addiche).width();
}
$(text).css(‘left’, i+‘px’);
}, 20);

}

render() {
const { Notice } = this.state
return (

{this.addiche = ref;}} className={styles.affiche} >

this.onMouseOverText()} onMouseLeave={() => this.onMouseLeaveText()} ref={(ref)=>{this.text = ref;}} className={styles.afficheText}>
{Notice}



);
}

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

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

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