如何在反应虚拟化中扩展手风琴列表？

问题描述

我正在尝试创建一个具有可扩展行的虚拟手风琴列表，但是当我单击一行时，它不会将列表向下推：数据显示在下一个手风琴行下方。

我尝试了 stackoverflow 的几个答案，但似乎没有一个适合我。

有些人建议使用 recomputeRowHeights() 但我不知道如何将它添加到我的代码中

任何帮助将不胜感激，我已经坚持了好几天了。

这是我的代码：

import React from "react";
import {List,AutoSizer,CellMeasurer,CellMeasurerCache} from "react-virtualized";
import faker from "faker";
import {Accordion,Card} from 'react-bootstrap';

export default function BigList(){
const cache = React.useRef(
  new CellMeasurerCache({
  fixedWidth: true,defaultHeight: 100,}));


const [people,setPeople] = React.useState([]);
const [time,setTime] = React.useState(new Date());


React.useEffect(()=>{
  setPeople(
    [...Array(10000).keys()].map(key => {
      return {
        id: key,name: `${faker.name.firstName()} ${faker.name.lastName()}`,bio: faker.lorem.lines(Math.random() * 100),}
    })
  )
},[]); 


React.useEffect(() => {
  const interval = setInterval(()=>{
    setTime(new Date())
  },1000);

  return () => clearInterval(interval);


},[]);
 


return( 

<div>
    
  <h1> {time.toISOString()}</h1>
    <div style={{width:"100%",height:"100vh" }}>
      <AutoSizer>{({width,height})=>
      <List 
          width={width} 
          height={height} 
          rowHeight= {cache.current.rowHeight}
          deferredMeasurementCache={cache.current} 
          rowCount={people.length} 
          roWrenderer={({key,index,style,parent})=>{
            const person = people[index];

            return (
            <CellMeasurer 

             key={key} 
             cache={cache.current} 
             parent={parent} 
             columnIndex={0} 
             rowIndex={index}>

            <div style={style}>
                <Accordion>
                  <Card>
                    <Accordion.Toggle as={Card.Header} eventKey={person} >
                    {person.name}<i>+</i>
                    </Accordion.Toggle>
                    <Accordion.Collapse eventKey={person}>
                      <Card.Body>
                        <p>{person.bio}</p>        
                      </Card.Body>
                    </Accordion.Collapse>
                  </Card>
                </Accordion>

            </div>

            </CellMeasurer>
            );

          }}
          /> }
          
          </AutoSizer>
      </div>
</div>
)};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）