zoukankan      html  css  js  c++  java
  • React高阶函数组件(HOC)

    方式一:Layout 作为一个高阶组件
    components/MyLayout.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;
    
    pages/index.js
    import withLayout from '../components/MyLayout';
    
    const Page = () => <p>Hello Next.js</p>;
    
    export default withLayout(Page);
    
    pages/about.js
    import withLayout from '../components/MyLayout';
    
    const Page = () => <p>This is the about page</p>;
    
    export default withLayout(Page);
    方式二:Page content 作为一个 prop
    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.content}
      </div>
    );
    
    export default Layout;
    
    pages/index.js
    import Layout from '../components/MyLayout.js';
    
    const indexPageContent = <p>Hello Next.js</p>;
    
    export default function Index() {
      return <Layout content={indexPageContent} />;
    }
    
    pages/about.js
    import Layout from '../components/MyLayout.js';
    
    const aboutPageContent = <p>This is the about page</p>;
    
    export default function About() {
      return <Layout content={aboutPageContent} />;
    }
    

    .

  • 相关阅读:
    [NOI Online 提高组]冒泡排序
    三元上升子序列
    上帝造题的七分钟2 / 花神游历各国
    JZOJ 1038. 【SCOI2009】游戏
    android.view.View
    SQLServer导出导出单表数据
    Android-support-v4源码查看
    一些平台
    Installation error: INSTALL_FAILED_CPU_ABI_INCOMPATIBLE
    AsyncTask
  • 原文地址:https://www.cnblogs.com/crazycode2/p/13360812.html
Copyright © 2011-2022 走看看