我正在使用scrollToIndex
和scrollToRow
,但没有添加新消息,我也尝试使用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])
1条答案
按热度按时间2hh7jdfx1#
scrollToIndex={messagesList.length - 1}在这里运行良好,这解决了我的问题