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 属性。

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

接下来，打开浏览器并在地址栏中输入 http://localhost:3000 并按回车键。

在组件中共享逻辑，又称渲染道具

渲染道具 是一个用于在 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 设计委托给其他组件。