如何延迟安装 Material UI 选项卡面板或了解选项卡面板何时可见？

Question

我正在使用 Material UI 选项卡在三个 TabPanel 之间进行选择。具体来说，我使用的是Simple Tabs Example。

在我的第二选项卡的组件需要访问这样的字段和方法elem.offsetHeight以及elem.getClientRects()调整布局。不幸的是，在面板中的组件显示之前，这些基于显示的东西都是零或空的。所有面板都立即安装，但第二个面板在安装时不可见，因此当我尝试在安装期间运行它们时，我的布局调整不起作用。

我认为我需要的是两件事之一：

1. 一些延迟加载选项卡面板内容的方法。（这个解决方案可能是最好的，因为第二个和第三个面板需要网络调用，并且在需要面板之前进行这样的调用是没有意义的。）

2. 某种方式知道面板的内容何时最终显示，以便代码可以触发布局调整。

另一种解决方案是设置超时以定期检查（例如每 100 毫秒）是否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/>组件包含getPage()访问elem.offsetHeight和的方法elem.getClientRects()。这个方法是从组件的构造函数中调用的。

Answer 1

我想出了如何让 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>