reactjs 如何延迟挂载材质UI选项卡面板或了解选项卡面板何时可见？

sczxawaw 于 2022-12-29 发布在 React

关注(0)|答案(3)|浏览(179)

我使用材质UI选项卡在三个选项卡面板之间进行选择。具体来说，我使用简单选项卡示例。
我的第二个标签页中的组件需要访问elem.offsetHeight和elem.getClientRects()等字段和方法来调整布局。不幸的是，这些基于显示的内容在面板中的组件显示之前是零或空的。所有面板都立即挂载，但第二个面板在挂载时不可见，因此当我试图在挂载期间运行布局调整时，布局调整不起作用。
我想我需要的是两样东西中的一件：
1.延迟加载选项卡面板内容的方法（这种解决方案可能是最好的，因为第二个和第三个面板需要网络调用，并且在需要面板之前进行这样的调用是没有意义的）。
1.了解面板内容最终显示时间的某种方法，以便代码可以触发布局调整。
另一种解决方案是设置一个超时，定期（比如每100 ms）检查elem.getClientRects()是否生成了一个包含任何元素的列表，但这看起来相当笨拙。

附录

很抱歉我的书面描述不够清楚。在我的SimpleTabs组件中：

<TabPanel value={value} index={0}>
    <About/>
  </TabPanel>
  <TabPanel value={value} index={1}>
    <ByRossPage/>
  </TabPanel>
  <TabPanel value={value} index={2}>
    <ByChapter/>
  </TabPanel>

<ByRossPage/>组件包含访问elem.offsetHeight和elem.getClientRects()的getPage()方法。此方法从组件的构造函数调用。

reactjs

来源：https://stackoverflow.com/questions/57465660/how-to-lazy-mount-material-ui-tab-panels-or-to-know-when-a-tab-panel-is-visible

3条答案

按热度按时间

ki0zmccv1#

我找到了如何让TabPanel的内容延迟加载的方法，我对TabPanel函数组件做了如下修改：

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
    >
      <Box p={3}>{value === index && children}</Box>
    </Typography>
  );
}

唯一更改的是以下行：

<Box p={3}>{value === index && children}</Box>

就是这样

<Box p={3}>{children}</Box>

赞(0）回复(0）举报 2022-12-29

yzxexxkh2#

您可以通过修改TabPanel来完成此操作

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;
  const panel = React.useRef();
  // this will run after the component mounted.
  React.useEffect(() => { 
     console.log(panel.current.getClientRects());
  }, []);
  return (
    <div ref={panel}>
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      <Box p={3}>{children}</Box>
    </Typography>
    </div>
  );
}

赞(0）回复(0）举报 2022-12-29

3ks5zfa03#

当我想检查一个div是否溢出时，我遇到了同样的情况，我可以通过条件渲染TabPanel使它正常工作
示例：

{tabIndex === 1 && (
      <TabPanel value={tabIndex} index={1}>
        <Component />
      </TabPanel>
    )}

赞(0）回复(0）举报 2022-12-29

我来回答

reactjs 如何延迟挂载材质UI选项卡面板或了解选项卡面板何时可见？

附录

3条答案

相关问题

热门标签

最新问答