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

React での要素への効率的なスクロール

この記事では、React アプリケーションでスクロール動作を管理する際に直面する一般的な課題、つまり、スクロール フォーカスが新しくロードされたものに留まるようにするという課題に取り組みます。要素。これを達成するための、React 16.3 および 16.8 に適したさまざまなアプローチを紹介します。

React 16.8 、Functional Component

useRef フックを利用して、目的の要素の ref を作成します。この ref にバインドされた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 を使用して ref を作成できます。 ()。 executeScroll メソッドは、ref で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 Callback

あるいは、ref コールバックを使用して、ref を要素にアタッチすることもできます。 。このメソッドにより、インスタンス変数を作成せずに、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
}

考慮事項

• String Refs を避ける: String refsパフォーマンスに影響するため、React では推奨されません。
• スムーズ スクロール アニメーション: スムーズ スクロールは、html 要素の CSS にスクロール動作:スムーズを追加することで有効にできます。
• 子への参照の受け渡し: 子コンポーネントに参照を渡すときは、競合を避けるために「ref」以外の名前を持つプロップに割り当てます。

以上がReact で要素まで効率的にスクロールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。