时间戳

首页 > 解决方案 > 抽屉在服务器端渲染的第一次渲染中不起作用

reactjs - 抽屉在服务器端渲染的第一次渲染中不起作用

问题描述

我需要在我的 Meteor 应用程序中实现 SSR，我在使用MaterialUI的Drawer时遇到问题，无法使用 onClick 事件处理程序进行切换。

任何样板文件或示例链接都会有所帮助。

版本：

@material-ui/core:3.1.1

@material-ui/icons:3.0.1

METEOR@1.8-rc.16

这就是我目前添加抽屉的方式：

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

标签： reactjsmeteormaterial-uiserver-side-rendering

解决方案

Drawer 的功能由状态切换管理，状态切换由事件处理程序触发。并且它们不会与 SSR 呈现的内容一起推送。所以，这就是反应假设的工作方式。并且在客户端启动时附加事件。

参考：

如果您在已经具有此服务器渲染标记的节点上调用 ReactDOM.hydrate()，React 将保留它并仅附加事件处理程序，从而使您获得非常高效的首次加载体验。

反应文档

推荐阅读