【React】React Layout的三种方式

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} />;
}

fayeah / blogs

【React】React Layout的三种方式 #8