React에서 특정 요소로 자동으로 스크롤하는 방법은 무엇입니까?

특정 요소로 자동 스크롤하는 방법

문제:

채팅 위젯에서 새 메시지는 자동으로 스크롤되어야 합니다. 사용자가 위로 스크롤하면 보기로 스크롤됩니다. 그러나 새 메시지가 로드되면 슬라이더가 상단에 고정되어 최신 메시지를 보기가 어렵습니다.

해결책:

다음 메시지가 로드될 때 특정 요소로 스크롤하려면 새 메시지가 추가되면 다음 단계를 따르세요.

React 16.8, Functional 컴포넌트

const ScrollDemo = () => {
  const myRef = useRef(null);
  const executeScroll = () => myRef.current.scrollIntoView(); // Run this function to execute scroll
  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3, 클래스 컴포넌트

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(); // Run this method to execute scrolling
}

클래스 컴포넌트 - 참조 콜백

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

  executeScroll = () => this.myRef.scrollIntoView(); // Run this method to execute scrolling
}

문자열 참조 방지:

성능 문제, 문자열 부족으로 인해 문자열 참조를 권장하지 않습니다. 향후 React 릴리스에서는 구성 가능성 및 제거 가능성이 있습니다.

선택 사항: 부드러운 스크롤 애니메이션:

부드러운 스크롤 환경을 위해 다음 CSS를 html 요소에 추가하세요.

html {
  scroll-behavior: smooth;
}

Ref를 a에 전달 하위:

하위 구성 요소 내의 특정 DOM 요소에 참조를 첨부하려면:

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

ChildComp 구성 요소 내에서:

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

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