ReactJS - 使用组件

更新于 2025/3/24 20:52:17

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>
   );
}

这里我们通过组件的value属性传递了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 命令为应用程序提供服务。