ReactJS - 组件的布局

上一页
下一页

React 的高级功能之一是它允许使用属性将任意用户界面 （UI） 内容传递到组件中。与 React 的特殊 children 属性相比，该属性只允许将单个用户界面内容传递到组件中，而此选项允许将多个 UI 内容传递到组件中。此选项可以看作是儿童财产的延伸。此选项的用例之一是布局组件的用户界面。

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

例

下面给出了一个快速而简单的示例，其中包含两个属性，页眉和页脚


 <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） 组件中。

在您最喜欢的编辑器中打开费用管理器应用程序。

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

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


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

接下来，打开 index.js 并在使用 ExpenseEntryItemList 组件时包含页眉和页脚属性。


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，然后按回车键。

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

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

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

简而言之，组件的属性（接受呈现用户界面的 JavaScript 函数）称为 Render Props。接收 Render Props 的组件将执行高级逻辑并将其与 Render Props 共享，Render Props 将使用共享逻辑渲染用户界面。

许多高级第三方库都基于 Render Props。

一些使用 Render Props 的库是:

  • React Router
  • Formik
  • Downshift

例如，Formik 库组件将进行表单验证和提交，并将表单设计传递给调用函数（也称为 Render Props）。同样，React Router 在使用 Render Props 将 UI 设计委托给其他组件时执行路由逻辑。

本页
上一页
下一页