하나의 방법은 경로를 동일한 구성 요소를 가리 키도록 설정하고 경로 매개 변수를 사용하여 현재 선택된 탭을 설정하는 것입니다. 당신은 당신이 목표로하고있는 "침묵"동작을 달성이 방법 :
<Route path="/dashboard" component={App}/>
<Route path="/news/:itemId" component={App}/>
과 :
componentWillReceiveProps() {
const { route, params } = props;
const { path } = route;
const selectedTab = path !== '/dashboard' ? 1 : 2;
this.setState({selectedTab})
console.log('news item -> ', params.itemId)
}
두 번째 방법은 스크롤 위치를 저장하고 다시 설정하는 것입니다.
실제로 동작하는 JSBin : https://jsbin.com/qiraqa/edit?js,output
관련 코드 :
scroll(e) {
const { tab, scrollPositions } = this.state;
const target = e.target,
scrollTop = target.scrollTop;
scrollPositions[tab] = scrollTop;
this.setState({
scrollPositions
});
console.log(scrollTop);
}
navigateToTab(tab) {
const { scrollPositions = [] } = this.state,
scrollPosition = scrollPositions[tab] || 0;
this._container.scrollTop = scrollPosition;
this.setState({tab});
}
과 :
<div style={MainStyles.overflow} onScroll={this.scroll.bind(this)} ref={(c) => this._container = c}>...
이 방법, 당신은 scrollPositions 배열 및 부하를 유지하기 위해 로컬 스토리지 또는 redux store을 사용할 수 있습니다 경로 변경 후 다시.
이 예제는 React Tabs with IMHO와는 아무런 관련이 없습니다. 두 가지 탐색 상태 사이에서 스크롤 위치를 저장하는 것이 문제입니다.
탭 구성 요소, 그것은 react-tabs 또는 material-ui's tabs 여부, 모든 탭을 렌더링하고 탭 사이를 이동할 때 오프에 가시성을 전환하여 스크롤 위치를 유지
더 많은 정보를 제공합니다. 그것은 탭의 스타일을 {height : 0, overflow : hidden}으로 설정하고이 방법은 컨테이너를 스크롤 위치로 유지합니다.
위에서 언급 한 것처럼 루트 구성 요소를 변경할 때이 기능은 작동하지 않으며 구성 요소가 다시로드 될 때 스크롤 위치가 재설정됩니다. 이는 경로가 경로 변경의 부작용을 사전에 알 수 없기 때문에 아마도 적절한 행동 일 것입니다.
는
this relevant Github thread에서 단 아브라모프을 인용 :
... 당신까지 당신의 구성 요소를 동일한 방식으로 렌더링 할 수 있습니다. 예를 들어 데이터를 로컬에서 캐시하지 않으면 라우터가 위치를 복원 할 수있는 방법이 없습니다.하지만 브라우저의 기본 동작이 작동하는 방식입니다. 우린 그냥 에뮬레이트하려고합니다.
즉,이 패러다임에 따르면, 라우터의 책임이 아니므로 수동으로 수행해야합니다.
'shouldComponentUpdate'를 사용하여 특정 상황에서 렌더링을 방지하는 방법은 어떻습니까? – azium
@azuim 콘텐츠가 완전히 변경되면 다시 렌더링해야한다고 생각합니다. 아마도 스크롤 이벤트를 듣고 어딘가에 scrollTop 값을 저장합니다. 적절한 ID를 가진 localStorage에서도. – Guy