ReactJS - 嵌套组件_ReactJS 菜鸟教程

React 中的嵌套组件是与另一个组件相关的组件。您也可以将其视为父组件内的子组件;但是它们不是通过继承概念联系在一起的，而是通过组合概念联系在一起的。因此，所有组件都嵌套在一起，以便创建更大的组件，而不是从父组件继承的较小组件。

React 组件是 React 应用程序的构建块。React 组件由多个单独的组件组成。React 允许将多个组件组合在一起以创建更大的组件。此外，React 组件可以嵌套到任何任意级别。

嵌套组件将使您的代码更加高效和结构化。但是，如果组件没有正确嵌套或组装，您的代码可能会变得更加复杂，从而导致效率降低。在本章中，让我们看看如何正确组合 React 组件。

FormattedMoney 组件

让我们创建一个组件 FormattedMoney，用于在渲染之前将金额格式化为两位小数。

第 1 步 - 在您最喜欢的编辑器中打开我们的费用管理器应用程序。

在 src/components 文件夹中创建一个名为 FormattedMoney.js 的文件，然后导入 React 库。

 import React from 'react';

第 2 步- 然后通过扩展 React.Component 创建一个类 FormattedMoney。

 class FormattedMoney extends React.Component { 
}

接下来，使用参数属性引入构造函数，如下所示 -

constructor(props) {	
	 	super(props);	
}

创建一个方法 format（）来格式化金额。

format(amount) {	
	 	return parseFloat(amount).toFixed(2)	
}

创建另一个方法 render（）以发出格式化的数量。

render() {
	 	return (
	 	 	 <span>{this.format(this.props.value)}</span>	
	 	);	
}

在这里，我们通过 this.props 传递 value 属性来使用 format 方法。

第 3 步 - 接下来，将组件指定为默认导出类。

export default FormattedMoney;

现在，我们已经成功创建了 FormattedMoney React 组件。

import React from 'react';

class FormattedMoney extends React.Component {
	 	constructor(props) {
	 	 	 super(props)
	 	}
	 	format(amount) {
	 	 	 return parseFloat(amount).toFixed(2)
	 	}
	 	render() {
	 	 	 return (
	 	 	 	 	<span>{this.format(this.props.value)}</span>
	 	 	 );
	 	}
}
export default FormattedMoney;

FormattedDate 组件

让我们创建另一个组件 FormattedDate 来格式化和显示费用的日期和时间。

第 1 步 - 在您最喜欢的编辑器中打开我们的费用管理器应用程序。

创建一个文件，FormattedDate.js src/components 文件夹中，然后导入 React 库。

 import React from 'react';

第 2 步 - 接下来，通过扩展 React.Component 创建一个类。

 class FormattedDate extends React.Component { 
}

然后用参数属性引入构造函数，如下所示 -

constructor(props) {	
	 	super(props);	
}

第 3 步 - 接下来，创建一个方法format（）来格式化日期。

format(val) {
	 	const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
	 	let parsed_date = new Date(Date.parse(val));
	 	let formatted_date = parsed_date.getDate() +	
	 	 	 "-" + months[parsed_date.getMonth()] +	
	 	 	 "-" + parsed_date.getFullYear()
	 	return formatted_date;
}

创建另一个方法 render（）以发出格式化的日期。

 render() { return ( <span>{this.format(this.props.value)}</span> ); }

在这里，我们通过 this.props 传递 value 属性来使用 format 方法。

第 4 步 - 接下来，将组件指定为默认导出类。

 export default FormattedDate;

现在，我们已经成功创建了 FormattedDate React 组件。完整代码如下：

import React from 'react';
class FormattedDate extends React.Component {
	 	constructor(props) {
	 	 	 super(props)
	 	}
	 	format(val) {
	 	 	 const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
	 	 	 let parsed_date = new Date(Date.parse(val));
	 	 	 let formatted_date = parsed_date.getDate() +	
	 	 	 	 	"-" + months[parsed_date.getMonth()] +	
	 	 	 	 	"-" + parsed_date.getFullYear()
	 	 	 return formatted_date;
	 	}
	 	render() {
	 	 	 return (
	 	 	 	 	<span>{this.format(this.props.value)}</span>
	 	 	 );
	 	}
}
export default FormattedDate;

<< ReactJS - 组件 ReactJS - 使用组件 >>