首次加载时未显示 React Material Tabs 指示器

Question

我有一个带有 React Material UI ( https://material-ui.com/components/tabs/ )的简单选项卡设置，其中路径值是动态设置的

export const Subnav: React.FC<Props> = ({ routes = [] }) => {
  const { pathname } = useLocation();
  const { push } = useHistory();    
  const handleChange = (e: ChangeEvent<{}>, path: string) => push(path);

  return (
    <Tabs
      indicatorColor="primary"
      onChange={handleChange}
      scrollButtons="auto"
      textColor="primary"
      value={pathname}
      variant="scrollable"
    >
      {routes.map(r => (
        <Tab label={r.name} value={r.path} />
      ))}
    </Tabs>
  );
};

当我第一次加载页面/导航到其中一个选项卡路由时，选择了正确的选项卡，但未显示指示器。为了显示指标，我必须再次单击同一个选项卡或选择另一个选项卡。

Answer 1

此问题已通过https://github.com/mui-org/material-ui/issues/20527解决

您需要手动触发 updateIndicator 方法。最简单的方法是调用调整大小事件（触发该方法）

useEffect(() => {
    window.dispatchEvent(new CustomEvent("resize"));
  }, []);

或者，向 actions 属性添加 ref 并直接调用该方法。看起来仍然是一个不理想的解决方案，但它是维护者提供的。

Answer 2

为此，还有另一种处理方法。在阵营材料UI有组件<Grow/> 可以弯曲<Tabs/>内<Grow/>和<Grow/>将纠正的指示器的位置。以下是示例：

<Grow in={true}>
  <Tabs
   action={ref => ref.updateIndicator()}
  >
   <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
  <Tabs>
</Grow>