React - Layout

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

Advertising

3 - Methods

3.1 - Layout as a Higher Order Component

Layout as a Higher Order Component

  • The Layout as High component Component
components/MyHocLayout.js
import Header from './Header'
 
const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}
 
const withLayout = Page => {
  return () => (
    <div style={layoutStyle}>
      <Header />
      <Page />
    </div>
  )
}
 
export default withLayout
  • All pages
pages/index.js
import withLayout from '../components/MyHocLayout'
 
const Page = () => <p>Hello World</p>
 
export default withLayout(Page)

3.2 - Layout as component with a prop

components/MyContentLayout.js
import Header from './Header'
 
const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}
 
const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.content}
  </div>
)
 
export default Layout
pages/index.js
import Layout from '../components/MyContentLayout.js'
 
const indexPageContent = <p>Hello World</p>
 
export default function Index() {
  return <Layout content={indexPageContent} />
}

3.3 - Layout with a props.children

components/MyLayout.js
import Header from './Header'
 
const layoutStyle = {
    margin: 20,
    padding: 20,
    border: '1px solid #DDD'
}
 
const Layout = props => (
    <div style={layoutStyle}>
        <Header />
        {props.children}
    </div>
)
 
/** This format works also
export default ({ children }) => (
  <div style={layoutStyle}>
    {children}
  </div>
)
*/
 
export default Layout
  • A page with this layout
pages/index.js
import Layout from '../components/MyLayout.js'
 
export default function Index() {
  return (
    <Layout>
      <p>Hello World</p>
    </Layout>
  )
}
Advertising

4 - Documentation / Reference

web/javascript/react/layout.txt · Last modified: 2019/06/21 09:34 by gerardnico