这个是根据nextjs服务端渲染做的一个小demo



关键性代码，主要是控制模态框显示隐藏

关于index页面

  1. //index.js
  2. /* eslint-disable jsx-a11y/anchor-is-valid */
  4. import React from 'react';
  5. import PropTypes from 'prop-types';
  6. import Button from '@material-ui/core/Button';
  7. import Dialog from '@material-ui/core/Dialog';
  8. import DialogTitle from '@material-ui/core/DialogTitle';
  9. import DialogContent from '@material-ui/core/DialogContent';
  10. import DialogContentText from '@material-ui/core/DialogContentText';
  11. import DialogActions from '@material-ui/core/DialogActions';
  12. import Typography from '@material-ui/core/Typography';
  13. import { withStyles } from '@material-ui/core/styles';
  14. import Link from 'next/link';
  16. const styles = theme => ({
  17.   root: {
  18.     textAlign: 'center',
  19.     paddingTop: theme.spacing.unit * 20,
  20.   },
  21. });
  23. class Index extends React.Component {
  24.   state = {
  25.     open: false,
  26.   };
  28.   handleClose = () => {
  29.     this.setState({
  30.       open: false,
  31.     });
  32.   };
  34.   handleClick = () => {
  35.     this.setState({
  36.       open: true,
  37.     });
  38.   };
  40.   render() {
  41.     const { classes } = this.props;
  42.     const { open } = this.state;
  44.     return (
  45.       <div className={classes.root}>
  46.         <Dialog open={open} onClose={this.handleClose}>
  47.           <DialogTitle>Super Secret Password</DialogTitle>
  48.           <DialogContent>
  49.             <DialogContentText>1-2-3-4-5</DialogContentText>
  50.           </DialogContent>
  51.           <DialogActions>
  52.             <Button color="primary" onClick={this.handleClose}>
  53.               OK
  54.             </Button>
  55.           </DialogActions>
  56.         </Dialog>
  57.         <Typography variant="h4" gutterBottom>
  58.           Material-UI
  59.         </Typography>
  60.         <Typography variant="subtitle1" gutterBottom>
  61.           example project
  62.         </Typography>
  63.         <Typography gutterBottom>
  64.           <Link href="/about">
  65.             <a>Go to the about page</a>
  66.           </Link>
  67.         </Typography>
  68.         <Button variant="contained" color="secondary" onClick={this.handleClick}>
  69.           Super Secret Password
  70.         </Button>
  71.       </div>
  72.     );
  73.   }
  74. }
  76. Index.propTypes = {
  77.   classes: PropTypes.object.isRequired,
  78. };
  80. export default withStyles(styles)(Index);

关于about页面



代码如下：

  1. //about.js
  2. /* eslint-disable jsx-a11y/anchor-is-valid */
  4. import React from 'react';
  5. import PropTypes from 'prop-types';
  6. import Button from '@material-ui/core/Button';
  7. import Typography from '@material-ui/core/Typography';
  8. import { withStyles } from '@material-ui/core/styles';
  9. import Link from 'next/link';
  10. const styles = theme => ({
  11.   root: {
  12.     textAlign: 'center',
  13.     paddingTop: theme.spacing.unit * 20,
  14.   },
  15. });
  17. function About(props) {
  18.   const { classes } = props;
  19.   console.log('classes..props',classes);
  21.   return (
  22.     <div className={classes.root}>
  23.       <Typography variant="h4" gutterBottom>
  24.         Material-UI
  25.       </Typography>
  26.       <Typography variant="subtitle1" gutterBottom>
  27.         about page
  28.       </Typography>
  29.       <Typography gutterBottom>
  30.         <Link href="/">
  31.           <a>Go to the main page</a>
  32.         </Link>
  33.       </Typography>
  34.       <Button variant="contained" color="primary">
  35.         Do nothing button
  36.       </Button>
  37.     </div>
  38.   );
  39. }
  41. About.propTypes = {
  42.   classes: PropTypes.object.isRequired,
  43. };
  45. export default withStyles(styles)(About);
  1. //app.js
  2. import React from 'react';
  3. import App, { Container } from 'next/app';
  4. import Head from 'next/head';
  5. import { MuiThemeProvider } from '@material-ui/core/styles';
  6. import CssBaseline from '@material-ui/core/CssBaseline';
  7. import JssProvider from 'react-jss/lib/JssProvider';
  8. import getPageContext from '../src/getPageContext';
  10. class MyApp extends App {
  11.   constructor() {
  12.     super();
  13.     this.pageContext = getPageContext();
  14.   }
  16.   componentDidMount() {
  17.     // Remove the server-side injected CSS.
  18.     const jssStyles = document.querySelector('#jss-server-side');
  19.     if (jssStyles && jssStyles.parentNode) {
  20.       jssStyles.parentNode.removeChild(jssStyles);
  21.     }
  22.   }
  24.   render() {
  25.     const { Component, pageProps } = this.props;
  26.     return (
  27.       <Container>
  28.         <Head>
  29.           <title>My page</title>
  30.         </Head>
  31.         {/* Wrap every page in Jss and Theme providers */}
  32.         <JssProvider
  33.           registry={this.pageContext.sheetsRegistry}
  34.           generateClassName={this.pageContext.generateClassName}
  35.         >
  36.           <MuiThemeProvider
  37.             theme={this.pageContext.theme}
  38.             sheetsManager={this.pageContext.sheetsManager}
  39.           >
  40.             {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
  41.             <CssBaseline />
  42.             {/* Pass pageContext to the _document though the renderPage enhancer
  43.                 to render collected styles on server-side. */}
  44.             <Component pageContext={this.pageContext} {...pageProps} />
  45.           </MuiThemeProvider>
  46.         </JssProvider>
  47.       </Container>
  48.     );
  49.   }
  50. }
  52. export default MyApp;

nextjs-demo的更多相关文章

  1. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  2. 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  3. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  4. 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  5. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  6. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  7. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  8. 钉钉开放平台demo调试异常问题解决：hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  9. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

  10. 轻量级通信引擎StriveEngine —— C/S通信demo（附源码）

    前段时间,有几个研究ESFramework的朋友对我说,ESFramework有点庞大,对于他们目前的项目来说有点“杀鸡用牛刀”的意思,因为他们的项目不需要文件传送.不需要P2P.不存在好友关系.也不 ...

随机推荐

  1. 【转】Java Spring AOP详解

    一.前言 在以前的项目中,很少去关注spring aop的具体实现与理论,只是简单了解了一下什么是aop具体怎么用,看到了一篇博文写得还不错,就转载来学习一下,博文地址:http://www.cnbl ...

  2. Java处理emoji

    1.问题产生情况 我遇到这个问题是做微信开发的时候有些有用的头像用了微信的emoji表情,然而我的mysql数据库用的编码是utf8_general_ci,就是utf-8编码,结果也就报错误了. 2. ...

  3. 文件上传（Servlet/Struts2/SpringMVC）

    文件下载(Servlet/Struts2)的链接:http://www.cnblogs.com/ghq120/p/8328093.html 文件上传 Servlet实现 要实现文件上传的功能,必须在f ...

  4. BootStrap 模态框禁用空白处点击关闭[转]

    模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处..... $('#myModal').modal({backdrop: 'static', keyboard: false}); - ...

  5. Ubuntu 批量修改图片大小

    现在的相机拍摄出来的照片通常远远大于电脑屏幕,不但尺寸很大,占用磁盘量也很大,我都是拍完照片立马就将其缩小到差不多HD的分辨率 改图片分辨率的软件有很多,除了耳熟能详的PS,Ubuntu下也有开源gi ...

  6. Android解析WindowManagerService（二）WMS的重要成员和Window的添加过程

    前言 在本系列的上一篇文章中,我们学习了WMS的诞生,WMS被创建后,它的重要的成员有哪些?Window添加过程的WMS部分做了什么呢?这篇文章会给你解答. 1.WMS的重要成员 所谓WMS的重要成员 ...

  7. 本地调试接口返回信息不对 以及 jar冲突问题

    今天下午在本地调试的时候碰到个很奇怪的问题:服务调用接口,返回的明明是有数据的,然后通过gson转换对象后,对象里面并没有自己想要的数据.看了代码什么的都没有问题.思考到底是哪里出了问题,想了半天想到 ...

  8. visual studio code 插入当前时间插件 -- Insert Time Stamp

    使用方法:ctrl + f5 效果:

  9. Xshell启动时显示丢失MSVCP110.dll

    重装系统,装完Xshell5启动时,出现丢失MSVCP110.dll文件 这种情况不要相信网上所说的什么下载“MSVCP110.dll”文件或者下载微软的vcredist 2012 这样没用 正确的姿 ...

  10. CSS3 transition介绍

    transition从效果上看是一种平滑过渡的动画,本质上是在线性时间内将属性从开始值过渡到结束值.例如获得焦点,点击鼠标等动作导致CSS属性值的变化是瞬间完成的,感觉有点生硬.用transition ...