React で要素までスクロールするにはどうすればよいですか?

React での要素へのスクロール

React では、開発者はチャット ウィジェット内など、特定の要素に動的にスクロールしたい状況に遭遇することがあります。読み込まれたメッセージがフォーカスされる必要があります。これを実現するには、いくつかのテクニックを使用できます:

React 16.8 、Functional Component

useRef フックを利用して、スクロールしたい要素への動的参照を作成できます:

const myRef = useRef(null);

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

参照が確立されたら、イベント ハンドラーまたはエフェクト内からexecuteScroll() 関数を呼び出してスクロールを実行できます。

React 16.3 、クラス コンポーネント

クラス コンポーネントの場合、次の 2 つのオプションがあります:

オプション 1: createRef を使用する

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

オプション 2: Ref コールバック

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 中国語 Web サイトの他の関連記事を参照してください。