ReactJS - 组件布局

React 的一个高级特性是允许使用属性将任意用户界面 (UI) 内容传递到组件中。与 React 的特殊 children 属性相比，后者只允许将单个用户界面内容传递到组件中，此选项允许将多个 UI 内容传递到组件中。此选项可以看作是 children 属性的扩展。此选项的用例之一是布局组件的用户界面。

例如，具有可自定义页眉和页脚的组件可以使用此选项通过属性获取自定义页眉和页脚并布局内容。

示例

下面是一个带有两个属性 header 和 footer 的快速简单的示例

<Layout header={<h1>Header</h1>} footer={<p>footer</p>} />

布局渲染逻辑如下：

return (<div>
   <div> 
      {props.header} 
   </div> 
   <div> 
      Component user interface 
   </div> 
   <div> 
      {props.footer} 
   </div> 
</div>)

让我们向我们的支出条目列表 (ExpenseEntryItemList) 组件添加一个简单的页眉和页脚。

在您喜欢的编辑器中打开 expense-manager 应用程序。

接下来，打开 src/components 文件夹中的 ExpenseEntryItemList.js 文件。

接下来，在 render() 方法中使用 header 和 footer props。

return (
   <div> 
      <div>{this.props.header}</div> 
         ... existing code ... 
      <div>{this.props.footer}</div> 
   </div> 
);

接下来，打开 index.js 并使用 ExpenseEntryItemList 组件时包含 header 和 footer 属性。

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItemList items={items}
         header={
            <div><h1>Expense manager</h1></div>
         }
         footer={
            <div style={{ textAlign: "left" }}>
               <p style={{ fontSize: 12 }}>Sample application</p>
            </div>
         } 
      />
   </React.StrictMode>,
   document.getElementById('root')
);

接下来，使用 npm 命令启动应用程序。

npm start

接下来，打开浏览器并在地址栏中输入 https://127.0.0.1:3000 并按 Enter 键。

在组件中共享逻辑，又名 Render props

Render props 是用于在 React 组件之间共享逻辑的高级概念。正如我们之前了解到的，组件可以通过属性接收任意 UI 内容或 React 元素（对象）。通常，组件会按原样渲染它接收到的 React 元素以及它自己的用户界面，就像我们在 children 和布局概念中看到的那样。它们之间不共享任何逻辑。

更进一步，React 允许组件通过属性获取一个返回用户界面而不是普通用户界面对象的函数。该函数的唯一目的是渲染 UI。然后，组件将进行高级计算，并将调用传入的函数以及计算值来渲染 UI。

简而言之，接收一个渲染用户界面的 JavaScript 函数作为属性的组件称为 Render Props。接收 Render Props 的组件将执行高级逻辑并将其与 Render Props 共享，后者将使用共享的逻辑渲染用户界面。

许多高级第三方库都基于 Render Props。一些使用 Render Props 的库包括：

• React Router
• Formik
• Downshift

例如，Formik 库组件将执行表单验证和提交，并将表单设计传递给调用函数，即 Render Props。类似地，React Router 执行路由逻辑，同时使用 Render Props 将 UI 设计委派给其他组件。