next.js 如何滚动到react virtualization消息容器中的最后一条消息

bvjveswy  于 2023-01-13  发布在  React
关注(0)|答案(1)|浏览(132)

我正在使用scrollToIndexscrollToRow,但没有添加新消息,我也尝试使用ref,但无法使其工作,请随时建议。在您的文本,我会非常乐意收到。
我想在添加新消息时滚动到最后一条消息。

useEffect(() => {
 parentRef.current!?.lastElementChild?.scrollIntoView()
}, [messagesList])

const rowRenderer = useCallback(
 ({index, isScrolling, key, parent, style, scrollToRow}) => {
  const chat = messagesList[index]
  console.log(
   'cell renderer index : ',
   index,
   ' list length : ',
   messagesList.length
  )
  return (
   <CellMeasurer
    cache={cache}
    columnIndex={0}
    key={key}
    parent={parent}
    rowIndex={index}
    className='List'
    scrollToRow={messagesList.length - 1}
    autoHeight={true}
    autoWidth={true}
    // ref={parentRef}
    recomputeRowHeights={index}
    recomputeRowWidths={index}
    resetMeasurementForRow={index}
    resetMeasurementForColumn={index}
    resetMeasurements={true}
    style={{wordWrap: 'break-word', whiteSpace: 'normal', flexWrap: 'wrap'}}>
    {({measure, registerChild}: any) => (
     <div style={style}>
      <Message
       key={chat?.id}
       ref={registerChild}
       data={chat}
      />
     </div>
    )}
   </CellMeasurer>
  )
 },
 [messagesList, cache]
)

const getMessages = useMemo(() => {
 console.log('getting messages....')

 return (
  <List
   scrollToAlignment={'end'}
   height={700}
   width={wrapperRef.current ? wrapperRef.current?.clientWidth : 100}
   style={{width: '100%', border: '2px solid grey'}} // important to maintain the width
   itemSize={10}
   deferredMeasurementCache={cache}
   rowHeight={cache.rowHeight}
   rowCount={messagesList.length}
   rowRenderer={rowRenderer}
   // scrollToIndex={messagesList.length}
   // ref={parentRef}
   scrollToRow={messagesList.length - 1}

   // scrollToIndex
  />
 )
}, [messagesList, wrapperRef.current])
2hh7jdfx

2hh7jdfx1#

scrollToIndex={messagesList.length - 1}在这里运行良好,这解决了我的问题

相关问题