Question

我使用React Material UI（https://material-ui.com/components/tabs/）进行了简单的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方法。最简单的方法是调用resize事件（触发该方法）

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

或者在操作prop上添加一个ref，然后直接调用该方法。似乎仍然是不理想的解决方案，但这是维护人员提供的。

Answer 2

为此，还有另一种方法可以处理此问题。在React material 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>

Answer 3

我的解决方案基于上述解决方案，但略有不同。不同之处在于我通过具有 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);

Answer 4

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>
  );
};

放入道具。赋予您任何意义的价值

第一次加载时不显示“反应物料选项卡”指示器

4 个答案: