ReactJS - 使用元件

React 元件代表網頁中一小塊使用者介面。React 元件的主要工作是渲染其使用者介面並在其內部狀態發生更改時更新它。除了渲染 UI 外，它還管理屬於其使用者介面的事件。總而言之，React 元件提供以下功能。

在 ReactJS 中使用元件

在本章中，讓我們使用新建立的元件並增強我們的 ExpenseEntryItem 元件。

步驟 1 - 在您喜歡的編輯器中開啟我們的 expense-manager 應用程式，並開啟 ExpenseEntryItem.js 檔案。

然後，使用以下語句匯入 FormattedMoney 和 FormattedDate。

import FormattedMoney from './FormattedMoney' 
import FormattedDate from './FormattedDate'

步驟 2 - 接下來，透過包含 FormattedMoney 和 FormattedDater 元件來更新 render 方法。

render() {
   return (
      <div>
         <div><b>Item:</b> <em>{this.props.item.name}</em></div>
         <div><b>Amount:</b> 
            <em>
               <FormattedMoney value={this.props.item.amount} />
            </em>
         </div>
         <div><b>Spend Date:</b> 
            <em>
               <FormattedDate value={this.props.item.spendDate} />
            </em>
         </div>
         <div><b>Category:</b> 
            <em>{this.props.item.category}</em></div>
      </div>
   );
}

在這裡，我們透過元件的值屬性傳遞了 amount 和 spendDate。

下面給出了 ExprenseEntryItem 元件的最終更新原始碼 -

import React from 'react'
import FormattedMoney from './FormattedMoney'
import FormattedDate from './FormattedDate'

class ExpenseEntryItem extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>{this.props.item.name}</em></div>
            <div><b>Amount:</b> 
               <em>
                  <FormattedMoney value={this.props.item.amount} />
               </em>
            </div>
            <div><b>Spend Date:</b> 
               <em>
                  <FormattedDate value={this.props.item.spendDate} />
               </em>
            </div>
            <div><b>Category:</b> 
               <em>{this.props.item.category}</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

index.js

開啟 index.js 並透過傳遞 item 物件來呼叫 ExpenseEntryItem 元件。

const item = {
   id: 1, 
   name : "Grape Juice", 
   amount : 30.5, 
   spendDate: new Date("2020-10-10"), 
   category: "Food" 
}
ReactDOM.render(
   <React.StrictMode>
   <ExpenseEntryItem item={item} />
   </React.StrictMode>,
   document.getElementById('root')
);

接下來，使用 npm 命令啟動應用程式。

npm start

開啟瀏覽器，在位址列中輸入 https://:3000 並按回車鍵。