react-custom-scrollbars动态内容自动滚动到底部实现方案咨询

Got it, let's solve this auto-scroll issue when you add dynamic content using react-custom-scrollbars! The key here is to get a reference to the Scrollbars component and trigger its scroll method once the new content has been rendered. Here's how to implement it for both class components (matching your initial code) and function components:

Class Component Solution #

First, we'll create a ref to access the Scrollbars instance, then call its scrollToBottom() method after the state (and DOM) has updated with new content.

import { Scrollbars } from 'react-custom-scrollbars';
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    // Create a ref to hold the Scrollbars instance
    this.scrollbarsRef = React.createRef();
    this.state = {
      // Initialize with your starting content
      contentItems: ['Some great content...']
    };
  }

  // Method to add new content
  addNewContent = () => {
    this.setState(
      prevState => ({
        contentItems: [
          ...prevState.contentItems,
          `New content added at ${new Date().toLocaleTimeString()}`
        ]
      }),
      // Callback runs AFTER state is updated and DOM is re-rendered
      () => {
        if (this.scrollbarsRef.current) {
          // Scroll to the bottom of the scroll container
          this.scrollbarsRef.current.scrollToBottom();
        }
      }
    );
  };

  render() {
    return (
      <div>
        <button onClick={this.addNewContent}>Add New Data</button>
        <Scrollbars
          style={{ width: 500, height: 300 }}
          // Bind the ref to the Scrollbars component
          ref={this.scrollbarsRef}
        >
          {/* Render all dynamic content items */}
          {this.state.contentItems.map((item, index) => (
            <p key={index}>{item}</p>
          ))}
        </Scrollbars>
      </div>
    );
  }
}

export default App;

Key Notes for Class Components: #

• Ref Usage: React.createRef() gives us direct access to the Scrollbars component's methods, including scrollToBottom().
• SetState Callback: We use the callback function in setState because state updates are asynchronous. This ensures we only trigger the scroll after the new content has been rendered to the DOM.

Function Component Solution (Modern React) #

If you're using function components with hooks, here's how to achieve the same behavior using useRef and useEffect:

import { Scrollbars } from 'react-custom-scrollbars';
import { useState, useRef, useEffect } from 'react';

function App() {
  const scrollbarsRef = useRef(null);
  const [contentItems, setContentItems] = useState(['Some great content...']);

  const addNewContent = () => {
    setContentItems(prev => [
      ...prev,
      `New content added at ${new Date().toLocaleTimeString()}`
    ]);
  };

  // Trigger scroll whenever contentItems updates
  useEffect(() => {
    if (scrollbarsRef.current) {
      scrollbarsRef.current.scrollToBottom();
    }
  }, [contentItems]); // Dependency array ensures this runs only when content changes

  return (
    <div>
      <button onClick={addNewContent}>Add New Data</button>
      <Scrollbars
        style={{ width: 500, height: 300 }}
        ref={scrollbarsRef}
      >
        {contentItems.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
      </Scrollbars>
    </div>
  );
}

export default App;

Key Notes for Function Components: #

• useRef: Creates a persistent reference to the Scrollbars component that doesn't reset on re-renders.
• useEffect: Listens for changes to contentItems and triggers the scroll once the new content is rendered. The dependency array ensures we don't run this unnecessarily.

Both solutions will automatically scroll to the bottom every time new content is added, so your users always see the latest data without manual scrolling.

内容的提问来源于stack exchange，提问作者Jayavel