React에서 요소로 어떻게 스크롤하나요?

React에서 요소로 스크롤

React에서 개발자는 채팅 위젯에서와 같이 특정 요소로 동적으로 스크롤하려는 상황에 직면할 수 있습니다. 로드된 메시지에 초점을 맞춰야 합니다. 이를 달성하기 위해 여러 기술을 사용할 수 있습니다:

React 16.8, Functional Component

useRef 후크를 활용하여 스크롤하려는 요소에 대한 동적 참조를 생성할 수 있습니다.

const myRef = useRef(null);

const executeScroll = () => myRef.current.scrollIntoView();

참조가 설정되면 이벤트 핸들러나 효과 내에서 ExecutionScroll() 함수를 호출하여 다음을 수행할 수 있습니다. 스크롤.

React 16.3, 클래스 구성요소

클래스 구성요소의 경우 두 가지 옵션이 있습니다.

옵션 1: createRef 사용

constructor(props) {
  super(props)
  this.myRef = React.createRef()  
}

옵션 2: 참조 콜백

render() {
  return <div ref={ (ref) => this.myRef=ref }></div>
}

두 경우 모두 this.myRef.scrollIntoView()를 사용하여 요소로 스크롤할 수 있습니다.

주의사항

• 피하세요 문자열 참조는 더 이상 사용되지 않으며 성능에 영향을 미칠 수 있으므로 사용합니다.
• 활성화 다음 CSS를 문서에 추가하여 부드러운 스크롤을 수행하세요.

html {
  scroll-behavior: smooth;
}

Ref를 하위 구성 요소에 전달

스크롤하려는 요소가 하위 구성 요소에 있는 경우 다음 기술을 사용할 수 있습니다:

const MyComponent = () => {
  const myRef = useRef(null)
  return <ChildComponent refProp={myRef}></ChildComponent>
}

const ChildComponent = (props) => {
  return <div ref={props.refProp}></div>
}

위 내용은 React에서 요소로 어떻게 스크롤하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!