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



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

关于index页面

//index.js

/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';

import PropTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import Dialog from '@material-ui/core/Dialog';

import DialogTitle from '@material-ui/core/DialogTitle';

import DialogContent from '@material-ui/core/DialogContent';

import DialogContentText from '@material-ui/core/DialogContentText';

import DialogActions from '@material-ui/core/DialogActions';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core/styles';

import Link from 'next/link';

const styles = theme => ({

  root: {

    textAlign: 'center',

    paddingTop: theme.spacing.unit * 20,

  },

});

class Index extends React.Component {

  state = {

    open: false,

  };

  handleClose = () => {

    this.setState({

      open: false,

    });

  };

  handleClick = () => {

    this.setState({

      open: true,

    });

  };

  render() {

    const { classes } = this.props;

    const { open } = this.state;

    return (

      <div className={classes.root}>

        <Dialog open={open} onClose={this.handleClose}>

          <DialogTitle>Super Secret Password</DialogTitle>

          <DialogContent>

            <DialogContentText>1-2-3-4-5</DialogContentText>

          </DialogContent>

          <DialogActions>

            <Button color="primary" onClick={this.handleClose}>

              OK

            </Button>

          </DialogActions>

        </Dialog>

        <Typography variant="h4" gutterBottom>

          Material-UI

        </Typography>

        <Typography variant="subtitle1" gutterBottom>

          example project

        </Typography>

        <Typography gutterBottom>

          <Link href="/about">

            <a>Go to the about page</a>

          </Link>

        </Typography>

        <Button variant="contained" color="secondary" onClick={this.handleClick}>

          Super Secret Password

        </Button>

      </div>

    );

  }

}

Index.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(Index);

关于about页面



代码如下：

//about.js

/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';

import PropTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core/styles';

import Link from 'next/link';

const styles = theme => ({

  root: {

    textAlign: 'center',

    paddingTop: theme.spacing.unit * 20,

  },

});

function About(props) {

  const { classes } = props;

  console.log('classes..props',classes);

  return (

    <div className={classes.root}>

      <Typography variant="h4" gutterBottom>

        Material-UI

      </Typography>

      <Typography variant="subtitle1" gutterBottom>

        about page

      </Typography>

      <Typography gutterBottom>

        <Link href="/">

          <a>Go to the main page</a>

        </Link>

      </Typography>

      <Button variant="contained" color="primary">

        Do nothing button

      </Button>

    </div>

  );

}

About.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(About);


//app.js

import React from 'react';

import App, { Container } from 'next/app';

import Head from 'next/head';

import { MuiThemeProvider } from '@material-ui/core/styles';

import CssBaseline from '@material-ui/core/CssBaseline';

import JssProvider from 'react-jss/lib/JssProvider';

import getPageContext from '../src/getPageContext';

class MyApp extends App {

  constructor() {

    super();

    this.pageContext = getPageContext();

  }

  componentDidMount() {

    // Remove the server-side injected CSS.

    const jssStyles = document.querySelector('#jss-server-side');

    if (jssStyles && jssStyles.parentNode) {

      jssStyles.parentNode.removeChild(jssStyles);

    }

  }

  render() {

    const { Component, pageProps } = this.props;

    return (

      <Container>

        <Head>

          <title>My page</title>

        </Head>

        {/* Wrap every page in Jss and Theme providers */}

        <JssProvider

          registry={this.pageContext.sheetsRegistry}

          generateClassName={this.pageContext.generateClassName}

        >

          <MuiThemeProvider

            theme={this.pageContext.theme}

            sheetsManager={this.pageContext.sheetsManager}

          >

            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}

            <CssBaseline />

            {/* Pass pageContext to the _document though the renderPage enhancer

                to render collected styles on server-side. */}

            <Component pageContext={this.pageContext} {...pageProps} />

          </MuiThemeProvider>

        </JssProvider>

      </Container>

    );

  }

}

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实现进程调度算法(二) RR(时间片轮转)

    一.概述 因为这次os作业对用户在控制台的输入输出有要求,所以我花了挺多的代码来完善控制台的显示. 也因为我这次要实现多个类似算法,所以将一些共性单独提取出来作为一个类. 如果只想要和算法有关的核心代 ...

  2. SSH注解方式与XML配置方式对照表

    一.Hibernate 1.一对多注解 2.单表注解 二.Struts2 Struts2注解 三.Spring 1.IOC注解 2.AOP注解

  3. 解决全站字符乱码（POST和GET中文编码问题）

    1 说明 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding(“utf-8”): GET请求:new String(request.getP ...

  4. JavaWeb学习总结（五）：HttpServletRespone对象（一）

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...

  5. axios中设置post请求，后台却无法识别参数

    场景:在使用iview时,定义api请求时,代码如下 export const delWord = (data) => { return axios.request({ url: '/words ...

  6. line-height属性的深入了解

    line-height属性的细节与大多数CSS属性不同,line-height支持属性值设置为无单位的数字.有无单位在子元素继承属性时有微妙的不同. 语法line-height: normal | & ...

  7. Java设计模式—状态模式

    状态模式又是一个比较难的设计模式 定义如下: 当一个对象内在状态改变时允许其改变行为,这个对象看起来像改变了其类. 个人理解:通俗的讲,状态模式就是状态的改变引起了行为的改变,但是,我们只能看到行为的 ...

  8. 实用的 Chrome Developers Tools

    做前端的,都喜欢 chrome , 里面的开发工具也很实用,网上看到文章不错,部分摘来分享 ------------------------------- console.log,中包含一些格式化的指 ...

  9. Android学习笔记(5)----启动 Theme.Dialog 主题的Activity时程序崩溃的解决办法

    新建了一个Android Studio工程,在MainActivity的主界面中添加了两个按钮,点击其中一个按钮用来启动 NormalActivity,点击另一按钮用来启动DialogActivity ...

  10. Linux基础入门之网络属性配置

    Linux基础入门之网络属性配置 摘要 Linux网络属性配置,最根本的就是ip和子网掩码(netmask),子网掩码是用来让本地主机来判断通信目标是否是本地网络内主机的,从而采取不同的通信机制. L ...