@01e9/react-page-layout 中文文档教程

Question

About

这个库允许你共享一个通用布局跨越许多不同的组件。 与 react-router 之类的东西一起使用非常有用，可以跨多个路径抽象设计的主要元素并减少代码重复。

Installation

npm install @01e9/react-page-layout --save

或者如果你使用 yarn

yarn add @01e9/react-page-layout

Preview

Example

这个 repo 下有一个例子目录。 在克隆回购中运行。 转到示例目录 并运行 npm install； npm start

Overview

该库允许您将所有布局逻辑集中到它自己的组件中。 它允许您创建一个布局，该布局可以有多个 ，您可以在其中注入内容。

布局感知组件可以使用 和

来填充插槽。

Setup

1. 第一步是您必须创建一个布局组件，这是一个常规的 React 组件，具有多个可以注入内容的 插槽。 您可以使用 组件并为它们命名来定义一个或多个插槽。 在这种情况下，“main”

   import React, { Component } from 'react';
   import { Slot } from '@01e9/react-page-layout';
   
   class PublicLayout extends Component {
       render() {
           return (
               <div>
                   <header>Page Header</header>
                   <Slot name="main" />
                   <footer>Page Footer</footer>
               </div>
           );
       }
   }
   
   export default PublicLayout;
   

2. 您必须让您的应用程序布局感知。 为此，您使用 组件让后代了解您应用的不同布局。 它需要你用一个对象指定它的 layouts 属性，其中键是名称，值是布局组件；

   import React, { Component } from 'react';
   import { render } from 'react-dom';
   import { LayoutProvider } from '@01e9/react-page-layout';
   import PublicLayout from './layouts/public';
   import LoginPage from './pages/login';
   
   // Create a map for all your layouts 
   const layouts = {
       'public': PublicLayout,
   };
   
   class App extends Component {
   function render() { 
   
       // Render your page inside
       // the layout provider
       return (
           <LayoutProvider layouts={layouts}>
               <LoginPage />
           </LayoutProvider>
       );
   }
   }
   
   render(App, document.getElementById('root'));
   

   注意：您的页面组件不必是 的直接后代，事实上您可能永远不会以这种方式使用它。 这仅用于说明目的。 此功能允许您将此包与任何路由库一起使用。

3. 接下来您必须创建页面。 这些页面为布局中的不同插槽提供内容。 为此，我们使用了两个组件，和

   。

   import { Page, Section } from '@01e9/react-page-layout';
   
   class LoginPage extends Component {
           render() {
               return (
                   <Page layout="public">
                       <Section slot="main">
                           <h1> THIS IS THE PAGE CONTENT </h1>
                       </Section>
                   </div>
               );
           }
   }
   

   您必须将 layout 属性传递给 ，以便它知道您要使用的布局。 同样，每个

   都有一个 slot 属性 将它与它提供内容的布局中的插槽联系起来。 在这种情况下 因为我们只有一个名为 public 的布局，而且它只有一个 插槽将其命名为 ma​​in 我们使用这些值。

Usage

1. 默认情况下，插槽的根是一个 div，但可以通过其 属性对其进行自定义。 您还可以自定义类名和样式。 有关详细信息，请参阅文档。

2. 您可以在布局中使用多个插槽。

       ...
       <Slot name="header" component="header" />
       <Slot name="content" component="main" />
       <Slot name="footer" component="footer" />
       ...
   

3. 插槽可以有默认内容，当没有指定相应部分时将使用默认内容

       ...
       <Slot name="header" component="header">
           Default Header content
       </Slot>
       ...
   

4. 如果插槽没有内容，它根本不会呈现。 这意味着 dom 不包含该插槽的任何元素。 这很有用，因为您不必在周围放置额外的元素。

5. 传递给 组件的任何道具都会传递给布局。 这对于标题、面包屑或标记页面所需的任何自定义很有用。

6. 插槽可以嵌套

       ...
       <Slot name="main" component="main">
           Ill show up before content
       &lt;Slot 
           name="content" 
           component="div" 
           style={{ margin: 20 }}
       /&gt;
   
       Ill show up after content
   &lt;/Slot&gt;
   ...
   

   在这种情况下，名称为 content 的 有一个边距。 ma​​in 插槽有额外的内容。 对应的页面可以决定，它要展示什么 通过使用相应的插槽。

       ...
       <Page layout="mylayout">
           <Section slot="content"> 
               I have things on top and after me, and
               I have a margin
           </Section>
       </Slot>
       ...
   

       ...
       <Page layout="mylayout">
           <Section slot="main"> 
               Im alone and margin-less
           </Section>
       </Slot>
       ...
   

Api

<LayoutProvider>

布局提供程序，使您的应用程序布局感知。 应该放在 尽可能高地进入组件层次结构。

Prop	Description	required
layouts	Map of all the component layouts, with keys being the names, and the values the components	Yes

<Slot>

Prop	Description	Default	required
name	The name of the slot	-	Yes
component	It allows you to determine the root component for this slot, for example you could pass "header" create a <header> element	div	No
wrapper	If you don't want to specify a component you can specify an element of your choice, for example <MyComponent className="red" />	-	No
className	class to be added to the root of this slot	-	No
style	styles to be appended to the root of this slot	-	{}

<Page>

Prop	Description	Default	required
layout	The name of the layout used to render this page	-	Yes
…	Any other prop, will be passed as is, to the layout	-	No

<Section>

Prop	Description	Default	required
slot	The name of the slot this section is providing content for	-	Yes