javascript - 在 .map() 函数中的第一个键之前附加一个元素

Question

我想重新创建类似 whatsapp/telegram 的时间线，其中消息按天数划分。
为了在 React 中呈现消息，我使用 Object.key(messages).map 函数。

Object.keys(this.messages).map(e => {
    return <div key={i++}>
              { this.messages[e] }

如何添加在昨天的最后一条消息和今天的第一条消息之间的“今天”？

Answer 1

我会将所有消息分组到单独的数组中，每个数组代表发生的每一天。为了做到这一点，创建一个对象 - 它的键将是唯一的日子和它的值 - 来自这些日子的消息。

// object similar to your 'messages' state
const messages = {
  message1: {
    body: "one day before message",
    time: 1534433188201
  },
  message2: {
    body: "newest message",
    time: 1534519588201
  },
  message3: {
    body: "2 days before newest message",
    time: 1534346788201
  },
  message4: {
    body: "also 2 days before newest message",
    time: 1534346788250
  }
};
// creating array from your object
const messagesArray = Object.keys(messages).map(m => messages[m]);
// sorting array - oldest to newest
const latestMessages = messagesArray.sort((a, b) => a.time > b.time);
// grouping by date - create an object, each key is a different date and value is an array of messages from that day
const groupedByDate = {};
latestMessages.forEach(message => {
  const date = new Date(message.time);
  const day = date.getDate();
  const month = date.getMonth();
  const year = date.getFullYear();
  // this will create 'date_17-7-2018' format as an example - you can do whatever you want/need here
  const key = `date_${day}-${month}-${year}`;
  // push message to existing key or create new array containing this message
  if(groupedByDate[key]) {
    groupedByDate[key].push(message);
  } else {
    groupedByDate[key] = [message];
  }
});
console.log(groupedByDate);

渲染部分现在看起来很简单 - 这是我如何处理这个的例子:

映射 Object.keys(groupedByDate) 并为每个键返回 div 或 span 以及 className="date-标签”(示例)。如果从此键中提取的日期等于 (new Date()).getDate() - 呈现“今天”，如果它是 (new Date()).getDate() - 1 - 呈现“昨天”，否则呈现“X 天前”。现在，在此 map 循环中，您还需要 map groupedByDate[key](当天的消息数组)并呈现消息。