Question

我有一个Tab头连接到了React Router。我正在使用Material UI并实现Tabs组件。我试图将突出显示移动到当前选项卡，但是我只能在默认选项卡上获取它。一切都在打字稿（.tsx / .ts）

我一直在寻找解决方案，并查看了Material UI的文档，但是那里的修复似乎无效。

我有一个“帐户”屏幕，其中有一个标签页眉和一个开关组件。标签页眉是一个单独的组件，因为它将在多个屏幕上使用。由于还有更多标签，因此缩短了“帐户”屏幕。

interface ComponentState {
    activeTab: string;
}

type ComponentProps = RouterProps;

class Account extends React.Component<ComponentProps, ComponentState> {
    public constructor( props: ComponentProps ) {
        super(props);

        this.state = {
            activeTab: props.match.params.tab || 'notifications',
        };
    }
    render() {
        const { activeTab } = this.state;
        return (
            <div>
                <TabHeader header="My Account" value={activeTab}>
                    <Tab
                        value="notifications"
                        label="Notifications"
                        component={Link}
                        to={'/subscription/notifications'}
                    />
                    <Tab
                        value="change_email"
                        label="Change E-mail"
                        component={Link}
                        to={'/subscription/email'}
                    />
                </TabHeader>
                <Switch>
                    // Routes
                </Switch>
            </div>
        );
    }
}
export default withRouter(Account);

这是Tabheader组件：

interface ComponentProps {
    header: string;
    value: string;
    children?: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>;
    tabsProps?: object;
    onChange?: (e: ChangeEvent<{}>, tab: string) => void;
}

const TabHeader = ({
    classes, header, value, children, onChange, tabsProps
}: StylesProps & ComponentProps) => (
    <Paper className={classes.root}>
        <Container maxWidth="xl">
            <Typography variant="h6" className={classes.tabTitle}>{header}</Typography>
            <Box display="block">
                <Tabs value={value} onChange={onChange} indicatorColor="primary">
                    {children}
                </Tabs>
            </Box>
        </Container>
    </Paper>
);
export default withStyles(styles)(TabHeader);

我正在解决以下问题：更改路线时当前选项卡未突出显示。

标签页眉未显示当前标签页

0 个答案: