62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
|
import React from 'react'
|
||
|
|
import dynamic from 'next/dynamic'
|
||
|
|
import Router from 'next/router'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
|
||
|
|
const HelloBundle = dynamic({
|
||
|
|
modules: () => {
|
||
|
|
const components = {
|
||
|
|
HelloContext: import('../../components/hello-context'),
|
||
|
|
Hello1: import('../../components/hello1'),
|
||
|
|
Hello2: import('../../components/hello2'),
|
||
|
|
}
|
||
|
|
return components
|
||
|
|
},
|
||
|
|
render: (props, { HelloContext, Hello1, Hello2 }) => (
|
||
|
|
<div>
|
||
|
|
<h1>{props.title}</h1>
|
||
|
|
<HelloContext />
|
||
|
|
<Hello1 />
|
||
|
|
{props.showMore ? <Hello2 /> : null}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
})
|
||
|
|
|
||
|
|
export default class Bundle extends React.Component {
|
||
|
|
static childContextTypes = {
|
||
|
|
data: PropTypes.object,
|
||
|
|
}
|
||
|
|
|
||
|
|
static getInitialProps({ query }) {
|
||
|
|
return { showMore: Boolean(query.showMore) }
|
||
|
|
}
|
||
|
|
|
||
|
|
getChildContext() {
|
||
|
|
return {
|
||
|
|
data: { title: 'ZEIT Rocks' },
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleShowMore() {
|
||
|
|
if (this.props.showMore) {
|
||
|
|
Router.push('/dynamic/bundle')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
Router.push('/dynamic/bundle?showMore=1')
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { showMore } = this.props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<HelloBundle showMore={showMore} title="Dynamic Bundle" />
|
||
|
|
<button id="toggle-show-more" onClick={() => this.toggleShowMore()}>
|
||
|
|
Toggle Show More
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|