ReactJS - 嵌套组件

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

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

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

FormattedMoney 组件

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

步骤 1 - 在您喜欢的编辑器中打开 expense-manager 应用。

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

import React from 'react';

步骤 2 - 然后创建一个类 FormattedMoney，通过扩展 React.Component 来实现。

class FormattedMoney extends React.Component { 
}

接下来，引入带有参数 props 的构造函数，如下所示 -

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 - 在您喜欢的编辑器中打开 expense-manager 应用。

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

import React from 'react';

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

class FormattedDate extends React.Component { 
}

然后引入带有参数 props 的构造函数，如下所示 -

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;

打印页面