这个是根据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. [C#]浅谈协变与逆变

    看过几篇说协变与逆变的博客,虽然都是正确无误的,但是感觉都没有说得清晰明了,没有切中要害.那么我也试着从我的理解角度来谈一谈协变与逆变吧. 什么是协变与逆变 MSDN的解释:https://msdn. ...

  2. HTML中字体的垂直排列

    1.源代码: <html> <head> </head> <body> <div style="font-size:18px;writi ...

  3. 您必须先调用“WebSecurity.InitializeDatabaseConnection”方法，然后再调用"WebSecurity"类的任何其他方法。

    今天调试程序的时候出现了这个是,可惜没截图! 您必须先调用“WebSecurity.InitializeDatabaseConnection”方法,然后再调用"WebSecurity&quo ...

  4. 分布式微服务技术之 Spring Cloud Netflix

    1 背景 Netflix 是全球十大视频网站中唯一收费站点,是美国互联网流媒体播放商,由于访问量巨大,转型为云计算公司. 由Netflix公司主持开发了一套代码框架和库Netflix OSS即open ...

  5. JDBC的DAO设计模式

    在javaEE中,java类的属性通过getter和setter来定义,get(或set)方法去除get(set)后,首字母小写即为Java类的属性.操作java类的属性有一个工具包,BeanUtil ...

  6. Qless 相关知识

    Qless是一个基于redis的分布式任务架构.相关代码在 https://github.com/seomoz/qless 它是完全有lua实现的,依靠 redis 对lua的支持,http://ww ...

  7. HDU 1757 矩阵求第n的递推式

    A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  8. dbUtils 中的各种 Handler 什么 意思

    ArrayHandler:把结果集中的第一行数据转成对象数组. ArrayListHandler:把结果集中的每一行数据都转成一个对象数组,再存放到List中. BeanHandler:将结果集中的第 ...

  9. 关键业务系统的JVM参数推荐(2018仲夏版) （强烈推荐 唯品会）

    年更贴,因为两年里遇到的事情,一些想法变了.也补充了不少VJTools的内容,比如为伸手党们准备的jvm-options.sh. 在关键的业务系统里,除了继续追求技术人员最爱的高吞吐与低延时之外,系统 ...

  10. csharp:Conversion Between DataTable and List

    /// <summary> /// http://www.codeproject.com/Tips/784090/Conversion-Between-DataTable-and-List ...