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;

列印頁面