react-custom-scrollbars 滚动到底部

日常开发中，数据会实时变动，但希望可以自动滚动到底部。如下实例即可

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

const Index = () => {
    const scrollbarsRef = useRef(null);
    // 模拟数据
    const [dataList, setDataList] = useState<string[]>([]);

    useEffect(() => {
        if(dataList.length === 0){
            let arr = [];
            for (let index = 0; index < 100; index++) {
                arr.push('测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试')
            };
            setDataList([...arr]);
        };
        
        // 监听数据的变化滚动到底部
        if (scrollbarsRef.current) {
            // 滚动到底部方法
            scrollbarsRef.current.scrollToBottom();
        }
    }, [dataList]);

    return (
        <div>
            <Scrollbars autoHeightMin={'186px'} autoHide autoHeight ref={scrollbarsRef}>
                {
                    dataList.map((item: string, index: number) => {
                        return (
                            <div key={index}>{index}:{item}</div>
                        )
                    })
                } 
            </Scrollbars>
        </div>
    );
}

export default Index;