<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list {
width: 200px;
height: 150px;
background: pink;
overflow: auto;
}
.news {
height: 30px;
}
</style>
</head>
<body>
<div id="test"></div>
<script src="../js/17/react.development.js"></script>
<script src="../js/17/react-dom.development.js"></script>
<script src="../js/17/babel.min.js"></script>
<script type="text/babel">
class NewsList extends React.Component{
state = {newsArr: []}
componentDidMount () {
setInterval (() => {
const {newsArr} = this.state
const news = '新闻' + (newsArr.length + 1)
// 更新状态
this.setState({
newsArr:[news, ...newsArr]
})
}, 1000)
}
getSnapshotBeforeUpdate () {
return this.refs.list.scrollHeight
}
componentDidUpdate(preProps, preState, height) {
this.refs.list.scrollTop += this.refs.list.scrollHeight - height
}
render () {
return (
<div className="list" ref="list">
{
this.state.newsArr.map((n, index) => {
return <div className="news" key={index}>{n}</div>
})
}
</div>
)
}
}
ReactDOM.render(<NewsList/>, document.getElementById('test'))
</script>
</body>
</html>
getSnapshotBeforeUpdate用例
最新推荐文章于 2023-09-27 19:03:44 发布