React でチャット ウィジェットの一番下までスクロールするにはどうすればよいですか?

React で要素にスクロールする方法

この記事では、新しいメッセージを受信したときにチャット ウィジェットのスクロールバーが上部に固定されたままになるという一般的な問題に対処します負荷。私たちの目標は、前の配列の最後のメッセージ要素にスクロールバーをフォーカスすることです。

解決策

この問題を解決するには、以下を行う必要があります。

1. 動的を作成するメッセージ要素をレンダリングするコンポーネントにインデックスを渡すことで refs を実行します。
2. 目的の場所までスクロールする適切なスクロール関数を利用します。 element.

React 16.8 、機能コンポーネント:

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // Scroll to the element

  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(); // Scroll to the element
}

クラスコンポーネント - 参照コールバック:

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

  executeScroll = () => this.myRef.scrollIntoView(); // Scroll to the element
}

重要な注意事項:

• パフォーマンスと構成可能性が低下するため、文字列参照の使用は避けてください。
• よりスムーズなスクロール アニメーションには、次のコードを追加します。 CSS:

html {
  scroll-behavior: smooth;
}

• 子コンポーネントに ref を渡すときは、ネイティブの "ref" prop との競合を避けるために、prop に別の名前を付けます。

以上がReact でチャット ウィジェットの一番下までスクロールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。