react实现⽆限循环滚动信息
本⽂实例为⼤家分享了react实现⽆限循环滚动信息的具体代码，供⼤家参考，具体内容如下
需求
后端传递过来的数据滚动显⽰，⿏标移⼊后停⽌滚动，⿏标移出后继续滚动，参考公司门户的公告信息栏
实现思路
思路⼀
在componentDidMount中定义⼀个定时器，每过1000ms触发⼀次事件，将数组中第⼀条数据push到数组中，再删除掉第⼀条数据，最后给div添加onMouEnter和onMouseLeave事件，让⿏标移⼊时清除定时器，⿏标移出时重新开启定时器。
代码：
class Roll extends React.Component{
state = {
list: [
{ title: '静夜思' },
{ title: '唐-李⽩' },
{ title: '窗前明⽉光' },
{ title: '疑是地上霜' },
{ title: '举头望明⽉' },
{ title: '低头思故乡' },
]
}
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(() => {
}, 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>
)
}
}
效果图：
可以看到实现出来的效果并不好，没有往上偏移的效果，所以有了思路⼆。
思路⼆
在思路⼀的基础上进⾏修改，在componentDidMount中定义定时器，每次向上偏移⼏个px，当偏移到⼀定距离后，将数组中第⼀条数据push到数组中，再删除掉第⼀条数据，最后给div添加onMouEnter和onMouseLeave事件。
js⽂件
class Roll extends React.Component{
state = {
list: [
{ title: '这是消息1' },
{ title: '这是消息2' },
{ title: '这是消息3' },
{ title: '这是消息4' },
{ title: '这是消息5' },
{ title: '这是消息6' },
{ title: '这是消息7' },
{ title: '这是消息8' },
{ title: '这是消息9' },
],
count: 0,
}
// 页⾯挂载时开启定时器
componentDidMount = () => {
this.begin()
}
// 定时器
begin = () => {
this.timer = setInterval(() => {
this.Roll()
}, 10);
}
// 关闭定时器
stop = () => {
clearInterval(this.timer)
}
// 每次向上偏移0.5px，使⽤state储存偏移的次数
Roll = () => {
this.setState({
count: unt+1
})
// 当偏移量达到40px时，将数组中第⼀个数据剪切到数组的最后，再减去⼀⾏⾼度对应的偏移次数
if(-0.5*unt <= -40){
let arr = this.state.list;
arr.push(this.state.list[0])
arr.splice(0,1);
this.setState({
list: arr,
count: unt - 50,
})
}
}
render(){
return (
<div className="box" onMouseEnter={this.stop} onMouseLeave={this.begin}>
<div className="content" ref='roll'>
react组件之间通信{this.state.list.map((item)=>{
return (
<p className='row'>
<a href="#" rel="external nofollow" >
{item.title}
</a>
</p>
)
})}
</div>
</div>
)
}
}
css⽂件
.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;
}
效果图：
获取节点
1.document获取节点
之前是真的没想到react⾥也能使⽤document获取元素节点，和js⾥⼀样的⽤法2.refs获取
通过获取
componentDidMount = () => {
console.fs.test);
}
render () {
return (
<div ref='test'>
123
</div>
)
}
3.findDOMNode获取
通过ReactDom.findDOMNode(this)来获取
this为当前组件的实例
componentDidMount = () => {
console.log(ReactDom.findDOMNode(this));
}
render () {
return (
<div className='test'>
123
</div>
)
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。