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://127.0.0.1:3000 并按回车键。