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

【问题标题】：React Material Tabs indicator not showing on first load首次加载时未显示 React Material Tabs 指示器
【发布时间】：2020-07-25 18:55:28
【问题描述】：

我有一个简单的选项卡设置，带有 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>
  );
};

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

【问题讨论】：

你能创建一个完整的codesandbox.io 工作示例吗？
如果你在导入模块中使用了 Lazy，可能是这个原因造成的。

标签： reactjs material-ui

【解决方案1】：

我的解决方案基于上述解决方案，但有点不同。不同之处在于我通过延迟调用 (setTimeout) 更新指标，延迟时间为400ms。不知道真正的原因。

在我对 Mui-Tabs 包装器的定义下

import * as React from 'react';

import MaterialTabs, { TabsActions } from '@material-ui/core/Tabs';

import { withStyles } from '@material-ui/core';

import { IProps } from './types';

import styles from './styles';

class Tabs extends React.PureComponent<IProps> {
    tabsActions: React.RefObject<TabsActions>;

    constructor(props) {
        super(props);

        this.tabsActions = React.createRef();
    }

    /**
     * Read more about this here
     * - https://github.com/mui-org/material-ui/issues/9337#issuecomment-413789329
    */
    componentDidMount(): void {
        setTimeout(() => {
            if (this.tabsActions.current) {
                this.tabsActions.current.updateIndicator();
            }
        }, 400); // started working only with this timing
    }

    render(): JSX.Element {
        return (
            <MaterialTabs
                action={this.tabsActions}
                indicatorColor="primary"
                variant="scrollable"
                scrollButtons="auto"

                {...this.props}
            />
        );
    }
}

export default withStyles(styles)(Tabs);

【讨论】：

【解决方案2】：

为此，还有另一种处理方法。在 React Material UI 中有组件<Grow/> 您可以在<Grow/> 内扭曲<Tabs/>，<Grow/> 将更正指标位置。以下是示例：

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

【讨论】：

【解决方案3】：

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

  const ref = useRef();

  useEffect(() => {useRef.current.updateIndicator()}, [pathname, render])

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

放入 props.render 你的任何事物的价值

【讨论】：

【解决方案4】：

这是通过https://github.com/mui-org/material-ui/issues/20527解决的

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

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

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

【讨论】：