私は以下のようなコンポーネントを持っています：
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に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" })
}
これがうまくいくことを願っています！
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加