import React, { useState, useLayoutEffect } from 'react';

const ChildComponent = ({ list }) => {
    const listRef = React.useRef(null);

    useLayoutEffect(() => {
        const scrollToBottom = () => {
            if (listRef.current) {
                listRef.current.scrollTop = listRef.current.scrollHeight;
            }
        };

        // 使用 requestAnimationFrame 确保在渲染完成后滚动
        const animationFrameId = requestAnimationFrame(scrollToBottom);

        return () => {
            cancelAnimationFrame(animationFrameId);
        };
    }, [list]);

    return (
        <div
            ref={listRef}
            style={
   
   {
                height: '200px',
                overflowY: 'auto',
                border: '1px solid #ccc',
                padding: '10px'
            }}
        >
            {list.map((item, index) => (
                <div key={index}>{item}</div>
            ))}
        </div>
    );
};

const App = () => {
    const [dataList, setDataList] = useState([
        'Item 1',
        'Item 2',
        'Item 3'
    ]);

    const addItem = () => {
        setDataList([...dataList, `Item ${dataList.length + 1}`]);
    };

    return (
        <div className="p-4">
            <button
                onClick={addItem}
                className="bg-blue-500 text-white px-4 py-2 rounded-md mb-4"
            >
                Add Item
            </button>
            <ChildComponent list={dataList} />
        </div>
    );
};

export default App;