Closed yyyyyyyysssss closed 1 month ago
version: "react-virtualized": "^9.22.5"
When a row is added to the List component by input, any input or mouse click event causes the rowRenderer function of the List component to execute repeatedly
Add a line:
const sendMessage = () => { const json = editor.getJSON(); const { content } = json; for (const item of content) { if (item.type === "image") { const dataUrl = item.attrs.src; const filename = item.attrs.title; const file = dataURLtoFile(dataUrl, filename); const msg = { id: '5355234', type: 'image', name: '卡卡罗特', content: dataUrl } chatContentAdd(msg); } else if (item.type === 'paragraph') { let content; if (!(content = item.content)) { continue; } let textMessage = []; for (const c of content) { if (c.type === 'text') { textMessage.push(c.text); } else if (c.type === 'hardBreak') { textMessage.push('<br>'); } } const msg = { id: '32131412', type: 'text', name: '贝吉塔', content: textMessage.join("") } chatContentAdd(msg); } } editor.commands.clearContent(); chatContentToLast(); } const chatContentAdd = (item) => { chatContentData.push(item); setChatContentData([...chatContentData]); };
List component:
<AutoSizer> {({ height, width }) => { return ( <VirtualizedList ref={chatContentRef} className='content-chat-list' width={width} height={height} rowCount={chatContentData.length} rowHeight={cache.current.rowHeight} deferredMeasurementCache={cache.current} rowRenderer={rowRenderer} onRowsRendered={handleRowsRendered} /> ); }} </AutoSizer> const cache = React.useRef( new CellMeasurerCache({ fixedWidth: true }) ); const rowRenderer = ({ index, key, parent, style }) => { const item = list[index] console.log('rowRenderer', index); return ( <CellMeasurer key={key} cache={cache.current} columnCount={1} columnIndex={0} rowIndex={index} parent={parent} > {({ registerChild }) => ( <div key={item.id} className='chat-item' ref={registerChild} style={style}> {renderItem(item)} </div> )} </CellMeasurer> ); };
version: "react-virtualized": "^9.22.5"
When a row is added to the List component by input, any input or mouse click event causes the rowRenderer function of the List component to execute repeatedly
Add a line:
List component: