ReactJS - 嵌套组件

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

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

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

FormattedMoney 组件

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

步骤 1 − 在您最喜欢的编辑器中打开我们的 expense-manager 应用程序。

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

import React from 'react';

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

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;