Reactで下にスクロールする機能を実装する

1. React の Scroll-to-Bottom 機能
2. クラス コンポーネントを作成して、React でスクロール トゥ ボトム機能を実装する
3. React で Scroll-to-Bottom 機能を実装する機能コンポーネントを作成する

最新のアプリケーションは情報で過負荷になることがあるため、スクロールは、開発者が顧客の注意を管理し、優れたユーザー エクスペリエンスを提供するのに役立つ機能の 1つです。

React は、非常に高速なシングルページ アプリケーションを構築するためのライブラリです。 React 開発者は、最新の機能を備えたアプリケーションを構築して、最高のユーザー エクスペリエンスを提供できます。

当然のことながら、React でスクロール機能を実装するにはどうすればよいかという質問があるかもしれません。 この記事では、React に scroll to bottom 機能を追加する方法について説明します。

React の Scroll-to-Bottom 機能

React でコンテナー要素の下部への自動スクロールを実装するには、refs とネイティブの Element.scrollIntoView() メソッドを使用します。

React における refs の定義

Web 開発者は通常、refs を使用して HTML 要素への参照を変数に格納します。 この変数は、JavaScript 関数およびメソッドで使用できます。

つまり、refs は JavaScript での要素の操作を容易にします。

React は DOM を直接処理しないため、ライブラリの公式ドキュメントでは、できるだけ少ない refs を使用することを推奨しています。 それでも、React でコンテナの一番下までスクロールしたい場合は refs が必要です。

Element インターフェイスを使用すると、要素自体でメソッドを呼び出すことができます。 scrollIntoView() は、ユーザーの画面に確実に表示されるように、特定の要素まで強制的にスクロールするために使用できるメソッドの 1つです。

ご想像のとおり、refs を使用して、注目したい要素を指定します。

クラス コンポーネントを作成して、React でスクロール トゥ ボトム機能を実装する

ES6 構文を導入して以来、React 開発者はクラス コンポーネントを簡単に記述できます。 苦労せずに、React クラス コンポーネントに scroll to bottom 機能を実装する方法を調べてみましょう。

class Messages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [
        "message 1",
        "message 2",
        "message 3",
        "message 4",
        "message 5",
        "message 6",
        "message 7",
        "message 8",
        "message 9",
        "message 10",
        "message 11",
        "message 12",
        "message 13",
        "message 14",
        "message 15",
        "message 16",
        "message 17",
        "message 18"
      ]
    };
  }
  messagesEndRef = React.createRef();

  componentDidMount() {
    this.scrollToBottom();
  }
  componentDidUpdate() {
    this.scrollToBottom();
  }
  scrollToBottom = () => {
    this.messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };
  render() {
    return (
      <div>
        {this.state.messages.map((message) => (
          <h1>{message}</h1>
        ))}
        <div ref={this.messagesEndRef} />
      </div>
    );
  }
}
export default Messages;

この ライブ デモ をチェックすると、このアプリケーションには、アプリケーション内のメッセージを表すための <h1> 要素でいっぱいのスクロール可能なコンテナがあることがわかります。 アプリケーションがリロードされるたびに、ユーザーは自動的にページの下部に移動します。

したがって、オンライン チャットがある場合は、この機能を実装して、ページをリロードするたびに一番下の最新のメッセージに移動することができます。

では、コードで何が行われているかをダイジェストしましょう。

1. ここに、Messages クラス コンポーネントがあります。 まず、messagesEndRef 変数を作成し、それを React.createRef() メソッドに設定して ref を初期化します。

2. 次に、コンテナーの下部に空の <div> 要素を作成し、その ref 属性を this.messagesEndRef に設定します。

   空の <div> はスペースを占有しないため、肉眼では目立たないため、これが必要です。 <h1> 要素の後に配置することで、常に親コンテナーの最後の要素になるようにします。

   したがって、一番下までスクロールするための基準点として使用するのに最適な要素です。

3. JSX では、クラス インスタンスの messagesEndRef プロパティを参照するなど、JavaScript 式を記述するには中括弧が必要です。

   次のステップでは、一番下までスクロールする scrollToBottom() 関数を書く必要があります。 この関数内で、messagesEndRef 変数の current プロパティにアクセスし、scrollIntoView() メソッドを呼び出します。

   不要ですが、スクロールがスムーズになるように指定できます。 このオプションは、はるかに優れたユーザー エクスペリエンスを提供します。

4. 次に、ライフサイクル メソッド componentDidMount() および componentDidUpdate() を使用して、このクラスで定義された scrollToBottom() メソッドを呼び出します。 componentDidMount() ライフサイクル メソッドは、コンポーネントがロードされるたびにこの関数を実行します。

   そのため、ユーザーがメッセージング アプリをロードするたびに、一番下に移動して最新のメッセージを読むことができます。 componentDidUpdate() ライフサイクル メソッドは、状態プロパティが変更されたときにこの関数を呼び出します。

   新しいメッセージが状態に追加されるたびに、コンポーネントが再レンダリングされ、ユーザーは最新のメッセージに移動します。

5. 最後に、単純な <div> コンテナを返します。 ここでは、state プロパティのすべての値を調べて、<h1> 要素として表示します。

   空の <div> もあり、React にスクロールする場所を伝えるためのアンカー ポイントとして使用します。

React で Scroll-to-Bottom 機能を実装する機能コンポーネントを作成する

React v16.8 のリリース以降、機能コンポーネントには、Class コンポーネントに限定されていたすべての機能が含まれています。

具体的には、useState() 機能を使用して、機能コンポーネントの状態を初期化できます。 useRef() フックは、前の例のライフスタイル メソッドを置き換えることができます。

また、createRef() メソッドの代わりに、コア react パッケージから useRef() フックをインポートします。

import React, { useEffect, useRef, useState } from 'react'

const Messenger = () => {
  const [messages, setMessages] = useState([
        "message 1",
        "message 2",
        "message 3",
        "message 4",
        "message 5",
        "message 6",
        "message 7",
        "message 8",
        "message 9",
        "message 10",
        "message 11",
        "message 12",
        "message 13",
        "message 14",
        "message 15",
        "message 16",
        "message 17",
        "message 18"
      ])
  const bottom = useRef(null)

  const scrollToBottom = () => {
    bottom.current.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages]);

  return (
    <div>
          {messages.map(message => <h1>{message}</h1>)}
          <div ref={bottom}></div>
    </div>
  )
}

では、上記のコード例を要約してみましょう。

1. まず、状態を初期化し、メッセージの配列と等しくなるように設定しました。 useState() フックも updater 関数を作成したので、必要に応じてさらにメッセージを追加できます。

2. 次に、useRef() フックを使用して ref を初期化し、それを bottom 変数に格納しました。 空の div の ref 属性をこの変数に等しく設定します。 中括弧を使用することを忘れないでください。

3. 次に、scrollToBottom 関数を実装します。これは、前の例の関数とほとんど同じです。

   ref と scrollIntoView() メソッドの current プロパティにアクセスします。 ここにもスムーズスクロールオプションを追加します。

4. 最後に、useEffect() フックを使用して、以前の 2つのライフサイクル メソッドを置き換えます。

   フックは 2つの引数を取り、1つはコンポーネントがマウントされるたびに実行される関数です。 2 番目の引数は、注意する状態変数の配列です。

   messages 状態変数の値が変化すると、useEffect() も関数を実行します。 これにより、componentDidUpdate() ライフサイクル フックを使用した場合と同じ結果が得られます。