元素的动态开放

问：

我有一个包含 100 个元素的对象和一个高度为 300px 的块，我使用 react-table 库，它一次显示它们，结果发现一些元素进入了这个块的底部（比如显示 10,11 是中途） 我做了一个函数，隐藏了一半显示的元素， 但是当重新启动时，显示一半的元素显示 1 秒钟，我怎样才能防止这种情况发生，并且对象立即以所需的顺序显示？这是代码

'const TableBlock = （{ info = []， columns = [] }： Props） => { const heightRef = useRef（null）;

useEffect(() => {
    const handleDisplay = () => {
        handleRowDisplay(heightRef, blockTopHeight);
    };

    window.addEventListener('resize', handleDisplay);
    handleDisplay();

    return () => {
        window.removeEventListener('resize', handleDisplay);
    };
}, []);

if (info.length === 0) {
    return <p className={style.textNotNews}>Сегодня данных нет</p>;
}

return (
    <Table
        components={{
            table: (props: Props<T>) => <table ref={heightRef} {...props} className={style.tableBlock} />,
            body: {
                cell: (props: Props<T>) => <td {...props} className={style.tableCell} />
            }
        }}
        columns={columns}
        data={info}
        rowKey={(record) => record.id}
        className={style.tableBlock}
    />
);

};`