26、邮件客户端与对战游戏开发：从MailBag到BattleJong

邮件客户端与对战游戏开发：从MailBag到BattleJong

1. MailBag客户端开发

MailBag是一个简单的Webmail客户端，在开发过程中我们涉及到了诸多技术，如React的条件渲染、MUI组件库、AJAX和Axios库以及CSS Grid。

1.1 消息列表展示

在消息列表展示方面，表头之后是表体，就像普通的HTML表格一样。表体中为每条消息创建一个表行，通过 map() 方法遍历 state.messages 列表。对于要显示的三个数据元素，在表行中添加表单元格，并将消息对象的相应属性渲染到其中。同时，表行有 onClick 属性，点击时调用 showMessage() 方法显示消息详情：

showMessage : async function(inMessage: IMAP.IMessage): Promise<void> {
  this.state.showHidePleaseWait(true);
  const imapWorker: IMAP.Worker = new IMAP.Worker();
  const mb: String = await imapWorker.getMessageBody(
    inMessage.id, this.state.currentMailbox
  );
  this.state.showHidePleaseWait(false);
  this.setState(() =&