react实现置顶效果

  <div className='lift'>
        <span onClick={this.tops}>置顶</span>
  </div>

  tops=(event)=>{
        document.querySelector('.lift').scrollTop=0
    }

获取最外面div的dom节点，然后通过scrollTop属性实现置顶效果

react最新数据展示

import React, { Component } from 'react'
import './Lift.scss'

export default class Lift extends Component {
    componentDidMount() {
        this.setTime()
    }
    // 初始化方法
    setTime() {
        this.state.id = setInterval(()=>{
            this.state.pArr.push(this.state.num)
            this.state.num ++
            this.setState({
                pArr:this.state.pArr
            })
        },300)
    }
    constructor(){
        super()
        this.state={
            pArr:[],
            num:1,
            id:null
        }
    }
  render() {
    return (
      <div className='lift'>
        <>
        {
                        this.state.pArr.map((value,index)=>{
                            return <p key={index}>{value}</p>
                        })
                    }
      
        </>
      </div>
    )
  }
     // 组件更新完毕
    componentDidUpdate(props,state,Snapshot) {

        document.querySelector(".lift").scrollTop +=document.querySelector(".lift").scrollHeight - Snapshot
    } 

    // 获取快照在更新前
    getSnapshotBeforeUpdate() {
        return document.querySelector(".lift").scrollHeight
    }
   // 组件将要销毁
 componentWillUnmount() {
    // 清除定时器
    clearInterval(this.state.id)
}

}