React에서 요소를 효율적으로 스크롤하는 방법은 무엇입니까?

React에서 요소로 효율적으로 스크롤

이 기사에서는 React 애플리케이션에서 스크롤 동작을 관리할 때 직면하는 일반적인 문제를 해결합니다. 즉, 새로 로드된 요소에 스크롤 포커스를 유지하는 것입니다. 강요. 이를 달성하기 위해 React 16.3 및 16.8에 적합한 다양한 접근 방식을 제시합니다.

React 16.8, 기능 구성 요소

useRef 후크를 활용하여 원하는 요소에 대한 참조를 생성합니다. 이 참조에 바인딩된 scrollIntoView 함수를 호출하면 해당 요소로 원활하게 스크롤됩니다.

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // scroll to element

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3 , Class Component

클래스 구성 요소의 경우 React.createRef를 사용하여 참조를 생성할 수 있습니다. (). ExecuteScroll 메소드는 참조에서 scrollIntoView 함수를 호출하여 원하는 요소로 부드럽게 스크롤합니다.

class ReadyToScroll extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // scroll to element
}

Ref 콜백

또는 참조 콜백을 사용하여 참조를 요소에 연결할 수 있습니다. . 이 방법을 사용하면 인스턴스 변수를 생성하지 않고 참조가 DOM 요소에 직접 할당됩니다.

class ReadyToScroll extends Component {
  render() {
    return <div ref={ref => (this.myRef = ref)}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.scrollIntoView(); // scroll to element
}

고려 사항

• 문자열 참조 방지: 문자열 참조 성능에 영향을 미치며 React에서는 권장되지 않습니다.
• 부드러운 스크롤 애니메이션: html 요소의 CSS에 scroll-behavior: smooth를 추가하여 부드러운 스크롤을 활성화할 수 있습니다.
• 하위 요소에 Ref 전달: 하위 구성 요소에 참조를 전달할 때 충돌을 피하기 위해 "ref" 이외의 이름을 가진 prop에 할당하세요.

위 내용은 React에서 요소를 효율적으로 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!