[scroll] react.js에서 렌더링 한 후 페이지 맨 위로 스크롤
나는 아이디어가 없으며 문제를 해결하는 데 문제가 있습니다. 내 반응 구성 요소에서 긴 데이터 목록과 하단에 링크가 거의 표시되지 않습니다. 이 링크 중 하나를 클릭 한 후 새 링크 모음으로 목록을 채우고 맨 위로 스크롤해야합니다.
문제는 새로운 컬렉션이 렌더링 된 후 맨 위로 스크롤하는 방법 입니다.
'use strict';
// url of this component is #/:checklistId/:sectionId
var React = require('react'),
Router = require('react-router'),
sectionStore = require('./../stores/checklist-section-store');
function updateStateFromProps() {
var self = this;
sectionStore.getChecklistSectionContent({
checklistId: this.getParams().checklistId,
sectionId: this.getParams().sectionId
}).then(function (section) {
self.setState({
section,
componentReady: true
});
});
this.setState({componentReady: false});
}
var Checklist = React.createClass({
mixins: [Router.State],
componentWillMount: function () {
updateStateFromProps.call(this);
},
componentWillReceiveProps(){
updateStateFromProps.call(this);
},
render: function () {
if (this.state.componentReady) {
return(
<section className='checklist-section'>
<header className='section-header'>{ this.state.section.name } </header>
<Steps steps={ this.state.section.steps }/>
<a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
Next Section
</a>
</section>
);
} else {...}
}
});
module.exports = Checklist;
답변
마지막으로. 나는 다음을 사용했다.
componentDidMount() {
window.scrollTo(0, 0)
}
편집 : 반응 v16.8 +
useEffect(() => {
window.scrollTo(0, 0)
}, [])
답변
원래 솔루션은 매우 초기 버전의 react 에 제공 되었으므로 다음은 업데이트입니다.
constructor(props) {
super(props)
this.myRef = React.createRef() // Create a ref object
}
componentDidMount() {
this.myRef.current.scrollTo(0, 0);
}
render() {
return <div ref={this.myRef}></div>
} // attach the ref property to a dom element
답변
이런 식으로 사용할 수 있습니다. ReactDom은 반응을위한 것입니다 .14. 그렇지 않으면 그냥 반응하십시오.
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
React 16+ 용 2019 년 5 월 11 일 업데이트
constructor(props) {
super(props)
this.childDiv = React.createRef()
}
componentDidMount = () => this.handleScroll()
componentDidUpdate = () => this.handleScroll()
handleScroll = () => {
const { index, selected } = this.props
if (index === selected) {
setTimeout(() => {
this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
}, 500)
}
}
답변
React Routing에는 새로운 경로로 리디렉션하면 자동으로 페이지 상단으로 이동하지 않는 문제가 있습니다.
심지어 나는 같은 문제가 있었다.
방금 구성 요소에 단일 행을 추가했으며 버터처럼 작동했습니다.
componentDidMount() {
window.scrollTo(0, 0);
}
참조 : 훈련 반응
답변
이것은 refs를 사용하여 처리 할 수 있으며 아마도 처리해야합니다 .
“… ReactDOM.findDOMNode를”이스케이프 해치 “로 사용할 수 있지만 캡슐화를 깨뜨리고 거의 모든 경우에 React 모델 내에서 코드를 구성하는 더 명확한 방법이 있으므로 권장하지 않습니다.”
예제 코드 :
class MyComponent extends React.Component {
componentDidMount() {
this._div.scrollTop = 0
}
render() {
return <div ref={(ref) => this._div = ref} />
}
}
답변
라우터에서 다음과 같이 할 수 있습니다 :
ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
<Route path='/' component={App}>
<IndexRoute component={Home}></IndexRoute>
<Route path="/about" component={About}/>
<Route path="/work">
<IndexRoute component={Work}></IndexRoute>
<Route path=":id" component={ProjectFull}></Route>
</Route>
<Route path="/blog" component={Blog}/>
</Route>
</Router>
), document.getElementById('root'));
는 onUpdate={() => window.scrollTo(0, 0)}
스크롤 상단을 넣어. 자세한 정보 확인 : codepen link
답변
후크를 사용하는 사람들에게는 다음 코드가 작동합니다.
React.useEffect(() => {
window.scrollTo(0, 0);
}, []);
useEffect를 직접 가져올 수도 있습니다. import { useEffect } from 'react'