ReactJS – 嵌套组件

正如我们之前所了解的，React 组件是 React 应用程序的构建块。一个 React 组件由多个单独的组件组成。React 允许组合多个组件以创建更大的组件。此外，React 组件可以嵌套到任意级别。让我们看看如何在本章中组合 React 组件。

FormattedMoney 组件

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

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

接下来，在src/components文件夹中创建一个FormattedMoney.js文件，然后导入 React 库。

import React from 'react';

接下来，通过扩展React.Component创建一个类FormattedMoney。

class FormattedMoney extends React.Component { 
}

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

constructor(props) { 
   super(props); 
}

接下来，创建一个方法格式来格式化金额。

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

接下来，创建一个方法render以发出格式化的数量。

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

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

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

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来格式化并显示费用的日期和时间。

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

接下来，在src/components文件夹中创建一个文件FormattedDate.js 。

接下来，导入React库。

import React from 'react';

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

class FormattedDate extends React.Component { 
}

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

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以发出格式化的日期。

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

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

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

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;