如何虚拟化Material-UI中的标签？

问题描述

我对React和MaterialUI还是很陌生，但是目前正在将它们用于一个小型项目。我目前有一个弹出的模式，带有垂直选项卡（https://material-ui.com/components/tabs/）。我在选项卡列表中有300多个项目，这使得模态弹出时的渲染需要1-2秒。我的标签页组件当前如下所示（请注意VerticalTab只是样式为Tab）：

 <Tabs
    orientation="vertical"
    variant="scrollable"
    value={tabVal}
    onChange={handleTabSelection}
  >
    {displayeditems.map((item) => (
      <VerticalTab
        label={(
          <div>
            <CheckBox
              checked={selectedItem[item.level][item.name]}
              onChange={handleCheckBoxChange}
              onClick={(event) => event.stopPropagation()}
              onFocus={(event) => event.stopPropagation()}
              color="primary"
              InputProps={{ 'aria-label': 'secondary checkBox' }}
            />
            <Typography variant="caption">{item.name}</Typography>
          </div>
        )}
        id={`vertical-tab-${item.name}`}
        key={`vertical-tab-${item.name}`}
      />
    ))}
  </Tabs>

我正在尝试添加react-window包以基于https://material-ui.com/components/lists/#virtualized-list来虚拟化标签，但是当尝试使用虚拟化列表时，渲染也会变得异常古怪，而且我不确定我是否可以甚至可以将选项卡包装在虚拟化列表中，或者如果我必须制作一个virtualizedTab组件之类的东西。这是我尝试使用的最新代码，但由于某些原因，选项卡水平排列，下方有一个巨大的空白

const renderRows = ({ index }) => (
   <VerticalTab
     label={(
       <div>
         <CheckBox
           onChange={handleCheckBoxChange}
           onClick={(event) => event.stopPropagation()}
           onFocus={(event) => event.stopPropagation()}
           color="primary"
           InputProps={{ 'aria-label': 'secondary checkBox' }}
         />
         <Typography variant="caption">{displayeditems[index].name}</Typography>
       </div>
     )}
     id={`vertical-tab-${displayeditems[index].name}`}
     key={`vertical-tab-${displayeditems[index].name}`}
   />
 );

 return (
   <div style={{ display: 'flex',flexGrow: 1,height: 570 }}>
     <Tabs
       orientation="vertical"
       variant="scrollable"
       value={tabVal}
       onChange={handleTabSelection}
     >
       <FixedSizeList height={500} itemSize={48} itemCount={displayeditems.length}>
         {renderRows}
       </FixedSizeList>
     </Tabs>
   </div>
) 

任何指针，想法或帮助将不胜感激！

解决方法

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

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

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