Open fayeah opened 4 years ago
layout为app提供一个统一的布局,React可有三种方式实现: Method 1: props.children
const Layout = props => ( <div style={layoutStyle}> <Header /> {props.children} </div> ); default function Index() { return ( <Layout> <p>Hello Next.js</p> //<p>Hello Next.js</p>即为Layout的children </Layout> ); }
Method 2: High Order Component
const withLayout = Page => { return () => ( <div style={layoutStyle}> <Header /> <Page /> </div> ); }; const Page = () => <p>Hello Next.js</p>; export default withLayout(Page);
Method 3: 传入一个content的prop
const Layout = props => ( <div style={layoutStyle}> <Header /> {props.content} </div> ); export default function Index() { return <Layout content={indexPageContent} />; }
layout为app提供一个统一的布局,React可有三种方式实现: Method 1: props.children
Method 2: High Order Component
Method 3: 传入一个content的prop