提交 3c71e818 编写于 作者: D David Nguyen 提交者: Tim Neutkens

Example/add high order component example (#2331)

* temporary commit

* update code

* completed example higher order component

* remove custom server
上级 e3f0fdb9
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-higher-order-component)
# Higher Order Component example
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
Install it and run:
**npm**
```bash
npm install
npm run dev
```
**yarn**
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## About example
This example show you how to create Higher Order Component in next.js
import React from 'react'
function withApp (Child) {
return class WrappedComponent extends React.Component {
static getInitialProps (context) {
return Child.getInitialProps(context)
}
render () {
return (
<div>
<header>
<h1>Header</h1>
</header>
<main>
<Child greeting='Hello From HOC' {...this.props} />
</main>
<footer>
<h1>Footer</h1>
</footer>
</div>
)
}
}
}
export default withApp
{
"name": "with-higher-order-component",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"author": "",
"license": "ISC"
}
import React from 'react'
import withApp from '../components/withApp'
class Index extends React.Component {
static getInitialProps (context) {
const { isServer } = context
return { isServer }
}
render () {
const { greeting } = this.props
return (
<div>
<h2>Index page</h2>
<h3 style={{ color: 'red' }}>{greeting}</h3>
</div>
)
}
}
export default withApp(Index)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册