我有一个如下所示的组件:
class App extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
{this.state.renderedThings.map((element, index) => (
<div key={index} className="cont">
<img alt="avatar" className="BlockOneImg" src={`./${element.image}.png`} role="presentation"/>
</div>
)}
</div>
)
}
}
每次都会动态添加图像,我需要滚动到添加的当前图像。
我已完成以下操作以使滚动到底部或最近添加的 DOM:
在您的图像 div 中添加引用,如下所示:
<div key={index} className="cont" ref={(ref) => this.newData = ref}
<img alt="avatar" className="BlockOneImg" src={`./${element.image}.png`}/>
</div>
并添加如下生命周期:
componentDidUpdate() {
this.newData.scrollIntoView({ behavior: "smooth" })
}
希望这有效!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)