React.js: 페이지 맨 위로 스크롤하는 것을 중지합니다.

React.js: 페이지 맨 위로 스크롤하는 것을 중지합니다.

React.js에서 렌더링을 수행할 때마다 UI가 페이지 맨 위로 스크롤됩니다.

JSFiddle:http://jsfiddle.net/bengrunfeld/dcfy5xrd/

그걸 막을 수 있는 좋은 방법이나 반응적인 방법은 없나요?

예를 들어 사용자가 페이지를 아래로 스크롤한 다음 렌더링의 원인이 되는 버튼을 누르면 UI는 이전과 동일한 스크롤 위치에 있게 됩니다.

// Forces a render which scrolls to top of page
this.setState({data: data});

업데이트: UI가 일부 렌더링에 대해 맨 위로 스크롤되는 이유는 무엇입니까?

좋아요, 누가 이걸 읽었는지는 모르겠지만, 제 경우엔 그 어떤 것도 문제가 아니었어요.어떤 식으로든 위의 첫 번째 제안을 시도해야 합니다.는 하다를 포함해서 다 요.preventDefault()사용하다'를 사용하다.styled-components스타일 컴포넌트는 렌더마다 임의의 클래스 이름을 부여하기 때문입니다.스크롤을 리셋합니다.나는 css에서 반 이름을 지어주고 문제를 해결했다.

@floydophone 님이 트위터에서 답변해 주셨습니다.

https://twitter.com/floydophone/status/608129119025561600

@ @bengrunfeld @잊으셨습니다.preventDefault()

태그를 하지 않는 .preventDefault이지만, 내 아이의 를 렌더링하는 것과 관련이 .div

display:table > display:tablecell

어떤 이유로든 이 상황에서는 렌더가 다시 있을 때 하위 구성 요소의 스크롤 위치가 손실됩니다.Flexbox(디스플레이:플렉스)로 바꾸자 문제가 사라졌습니다.

렌더 트리거 스크롤이 맨 위로 이동하는 경우 일반적으로 상태 때문에 일부 UI 구성 요소가 치수를 변경하고 있음을 의미하며, 최소 너비/높이를 추가하여 수정할 수 있습니다.

이 문제는 redux 상태가 변경되었기 때문에 발생할 수 있습니다.이러한 변경은 사용되고 있는 코드의 모든 부분에 표시됩니다.해당 컴포넌트의 로컬 상태를 사용하여 변경해 보십시오.이 경우 해당 컴포넌트는 페이지를 스크롤합니다.

2022년 Hacky 솔루션:

리렌더 스크롤을 완전히 막을 수 있는 방법을 찾을 수 없습니다. preventDefault도움이 되지 않았고 특정 요소 구조에 액세스할 수 없었지만 스크롤 요소의 className은 가지고 있었습니다.

useEffect(() => {
  const el = document.getElementsByClassName('my-classname')?.[0];
  const newTimeoutRef = setTimeout(() => el?.scrollTo(0, scrollTop), 50);
  return () => clearTimeout(newTimeoutRef);
}, [scrollTop]);

에 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아scrollTop(컴포넌트 상태로) 스크롤이 맨 위로 이동했던 이벤트 내.

여기서 가장 중요한 점은setTimeout이것은 기본적으로 DOM이 를 호출하기 전에 맨 위로 스크롤할 수 있는 시간을 줍니다.el.scrollTo조금 섬광은 있지만, 그것은 나에게 가장 효과가 있는 해결책이었다.

언급URL : https://stackoverflow.com/questions/30365818/react-js-stop-render-from-scrolling-to-top-of-page