Ящик не работает при первом рендеринге на стороне сервера. - PullRequest
Новая
       20

Ящик не работает при первом рендеринге на стороне сервера.

0 голосов
/ 28 сентября 2018

Мне нужно реализовать SSR в моем приложении Meteor, где у меня возникают проблемы с Drawer из MaterialUI для переключения с обработчиком событий onClick.

Были бы полезны любые шаблоны или ссылки на примеры.

Версии :

@ material-ui / core: 3.1.1

@ material-ui / icons: 3.0.1

METEOR@1.8-rc.16

Вот как я сейчас добавил Drawer: 

  const Header = props => {
  const { classes, handleDrawerToggle, mobileOpen } = props

  return (
    <div>
      <StyledAppBar>
        <TopBorders>
          <div />
          <div />
          <div />
          <div />
        </TopBorders>
        <Grid container justify="center">
          <Grid item lg={9} md={10} sm={9} xs={12}>
            <Toolbar>
              <div style={{ flex: 1 }}>
                <Link to="/">
                  <LogoImage src="/img/Logo.png" alt="Drone Pilot" />
                </Link>
              </div>
              <div>
                <Hidden mdUp implementation="css">
                  <IconButton
                    aria-label="open drawer"
                    onClick={() => handleDrawerToggle(!mobileOpen)}
                  >
                    <MenuIcon />
                  </IconButton>
                </Hidden>
                <Hidden smDown implementation="css">
                  <NavItem />
                </Hidden>
              </div>
            </Toolbar>
          </Grid>
        </Grid>
      </StyledAppBar>
      <Drawer
        variant="temporary"
        anchor="right"
        open={mobileOpen}
        onClose={() => handleDrawerToggle()}
        ModalProps={{
          keepMounted: true, // Better open performance on mobile.
        }}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
        <NavItem />
      </Drawer>
    </div>
  )
}

const mapStateToProps = state => ({
  mobileOpen: state.mainReducer.mobileOpen,
})

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ActionCreators, dispatch)
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(Header))

1 Ответ

0 голосов
/ 28 сентября 2018

Функциональность ящика управляется переключением состояний, которое запускается обработчиками событий.И они не продвигаются с предоставленным SSR контентом.Итак, вот как реагировать на работу.И события присоединяются, когда запускается сторона клиента.

ref:

Если вы вызываете ReactDOM.hydrate () на узле, который уже имеет эту серверную разметку, React сохранитон и только присоединяет обработчики событий, что позволяет вам иметь очень производительный опыт при первой загрузке.

React Docs

...