Может ли состояние реакции использоваться для увеличения высоты панели приложения при загрузке конкретной c ссылки на маршрутизатор? - PullRequest
Новая
       121

Может ли состояние реакции использоваться для увеличения высоты панели приложения при загрузке конкретной c ссылки на маршрутизатор?

0 голосов
/ 04 мая 2020

В настоящее время у меня установлено приложение, реагирующее на реагирующий маршрутизатор, и два компонента страницы. У меня также есть панель приложения, которая экспортируется в файл приложения. js, так что независимо от того, какая страница отображается в маршрутизаторе, панель приложений является согласованной для каждого. Высота панели приложения составляет 70px, но я хотел бы сделать так, чтобы высота составляла 128px при отображении домашней страницы. js компонент, и если пользователь щелкает обратно на другую страницу, высота панели приложения возвращается к 70px.

Приложение. js код: 

function App () {
  return (
    <Router>
     <ThemeProvider theme={theme}>
      <CssBaseline/>
      <AppBar>
       <PageLink to="/about" name="About"/>
       </Appbar>
       <Switch>
        <Router exact path="/">
         <Home/>
        </Route>
       <Route path="/about">
        <About/>
      </Route>
    </Switch>
      </ThemeProvider>
    </Router>
  );
}

Это код панели приложения (не со всеми стилями, но он включает две определенные высоты, как показано ниже): 

const useStyles = makeStyles((theme) => ({
standard: {
height: 72,
},
extended: {
height: 128,
},
})),

<MUIAppBar
id={id}
className={clsz(classes.container, classes[variant])}
position={position}
elevation={0}
style={style}
>

<Toolbar className={classes.toolbar} variant="dense">
<Link className={classes.title} to="/"></Link>
</Toolbar>
</MUIAppBar>
);
};

AppBar.defaulProps = {
id: "app-bar"
children: null,
style: {}
position: "static"
variant:"standard"
};

AppBar.propTypes = {
id: PropTypes.string,
children: PropTypes.node,
style: PropTypes.objectOf(PropTypes.any),
position: PropTypes.oneOf([
"fixed",
"absolute",
"sticky",
"static",
"relative",
]),
variant: PropTypes.oneOf(["standard", "extended])
};

После этого и определения типов реквизитов для обеих версий я не могу думать, что делать дальше, чтобы отобразить расширенный вариант, как показано в коде выше, будет ли это синтаксис состояния и будет ли он помещен в приложение. js отображать путь "/" для домашней страницы?

1 Ответ

0 голосов
/ 04 мая 2020

Быстрым и, возможно, грязным решением было бы обернуть ваш AppBar компонент в Switch роутере следующим образом: 

const AppBarRouter = () => {
  // Define all routes that need extended bar
  const extendedRoutes = [
    '/',
    'another-extended-route',
  ];
  return (
    <Switch>
      // Render all extended routes
      {extendedRoutes.map(path => {
        return <Route path={path} key={path} component={() => <AppBar extended />}
      })
      // The rest are not extended
      <Route component={AppBar}
    <Switch>
  )
}

Затем вы можете отобразить AppBarRouter в вашем App component.

Затем вы можете расширить эту логику c, чтобы она работала для ваших пользовательских компонентов панели инструментов, если вам нужны разные навигационные ссылки для разных маршрутов.

...