Question

我有一个如下组件：

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>
        )
    }
}

每次动态添加图像，我需要滚动到当前添加的图像。

Answer 1

我已完成以下操作以滚动到底部或最近添加了DOM：

在图片div中添加ref，如下所示：

<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" })
}

希望这有效！

当数据在动态中添加到反应js中时，滚动到页面底部？

1 个答案: