Javascript React-在部分中显示文本消息

我需要在以下部分显示文本消息：

今天收到的邮件，昨天收到的邮件，本周收到的邮件，本月收到的邮件，并在之后的一个月内继续发送

例如：

我的尝试：

Dashboard.js

import React from "react"
import MessageList from "./MessageList"

export default class Dashboard extends React.Component {

  constructor() {
    super()
    this.state = {
      messages: [
            {
                id: "1",
                body: "Hello",
                date: "2017-04-22T09:25:50",

            },
            {
                id: "2",
                body: "Hello",
                date: "2017-04-21T04:31:22",

            },
            {
                id: "3",
                body: "How are you?",
                date: "2017-04-21T03:08:31",

            },
            {
                id: "4",
                body: "Meeting soon",
                date: "2017-04-18T01:10:32",

            }
        ]
      }
    }

  render() {
    return (
      <div id="dashboard">
        <MessageList messages={this.state.messages}/>
      </div>
    )
  }
}

从“React”导入React
从“/MessageList”导入MessageList
导出默认类Dashboard扩展React.Component{
构造函数（）{
超级（）
此.state={
信息：[
{
id:“1”，
身体：“你好”，
日期：“2017-04-22T09:25:50”，
},
{
id:“2”，
身体：“你好”，
日期：“2017-04-21T04:31:22”，
},
{
id:“3”，
身体：“你好吗？”，
日期：“2017-04-21T03:08:31”，
},
{
id:“4”，
正文：“即将开会”，
日期：“2017-04-18T01:10:32”，
}
]
}
}
render（）{
返回(
)
}
}

MessageList.js

import React from "react"

export default class MessageList extends React.Component {
  constructor() {
    super()
  }

  render() {
    var currentDate = new Date()
    var currentDayOfMonth = currentDate.getDate()
    var currentDayOfWeek = currentDate.getDay()
    var timeline = "Today"

    const messageList = this.props.messages.map((message) => {

      var date = message.date.substring(0, 10)
      var time = message.date.slice(12)

      var testDate = new Date(date)
      var testDayOfMonth = testDate.getDate()+1
      var testDayOfWeek = testDate.getDay()

      if(currentDayOfMonth == testDayOfMonth+1){
        timeline = 'Yesterday'
      } else if(currentDayOfMonth > testDayOfMonth+1 && currentDayOfWeek - testDayOfWeek < 6) {
        timeline = 'This week'
      }

        return (
          <div key={message.id}>
            <h2>{timeline}</h2>
            <li className="list-group-item">
              Date: {date} <br></br>
              Time: {time} <br></br>
              Body: {message.body}
            </li>
          </div>
        )
    })

    return (
      <div id="messageList">
        <ul className="list-group">
          {messageList}
        </ul>
      </div>
    )
  }
}

从“React”导入React
导出默认类MessageList扩展React.Component{
构造函数（）{
超级（）
}
render（）{
var currentDate=新日期（）
var currentDayOfMonth=currentDate.getDate（）
var currentDayOfWeek=currentDate.getDay（）
var timeline=“今天”
const messageList=this.props.messages.map（（message）=>{
var date=message.date.substring（0,10）
var time=message.date.slice（12）
var testDate=新日期（日期）
var testDayOfMonth=testDate.getDate（）+1
var testDayOfWeek=testDate.getDay（）
if（currentDayOfMonth==testDayOfMonth+1）{
时间线=‘昨天’
}else if（currentDayOfMonth>testDayOfMonth+1&¤tDayOfWeek-testDayOfWeek<6）{
时间线='本周'
}
返回(
{时间线}

日期：{Date}


时间：{Time}


正文：{message.Body}

)
})
返回(

{messageList}

)
}
}

但是，我的应用程序如下所示：

每次都会显示

H2

。解决这个问题的最好方法是什么

另外，有人知道一种更好的方法来组织消息吗？我正在考虑为每个小组制作

子组件

：为今天制作

组件

，为昨天制作

组件

谢谢
我认为您应该创建一个名为“Message”的组件。
然后创建列表组件，如下所示：


YesterdayMessageList（仅包含一个h2标记和消息）
TodayMessageList（仅包含一个h2标记和消息）
ThisWeekMessageList（仅包含一个h2标记和消息）

毕竟，仪表板中的组件将包括上述3个组件。
昨天的消息列表，今天的消息列表，这周的消息列表
我认为，这就是您需要修改渲染方法的方式：

  var currentDate = new Date()
  var currentDayOfMonth = currentDate.getDate()
  var currentDayOfWeek = currentDate.getDay()
  var timeline = "today"

  var mssgTypeList = {
    "today" : [],
    "yesterday" : [],
    "this_week" : []
   }

   this.props.message.forEach(function(message,index){
      var date = message.date.substring(0, 10)
      var time = message.date.slice(12)

      var testDate = new Date(date)
      var testDayOfMonth = testDate.getDate()+1
      var testDayOfWeek = testDate.getDay()

      if(currentDayOfMonth == testDayOfMonth+1){
        timeline = 'yesterday'
      } else if(currentDayOfMonth > testDayOfMonth+1 && currentDayOfWeek - testDayOfWeek < 6) {
        timeline = 'this_week'
      }

      mssgTypeList[timeline].push(message);

   });

   const TodayMessageList = mssgTypeList["today"].map((message) => {
      var date = message.date.substring(0, 10);
      var time = message.date.slice(12);

        return (
            <li className="list-group-item" key={message.id}>
              Date: {date} <br></br>
              Time: {time} <br></br>
              Body: {message.body}
            </li>
        )
   });

   const YesterdayMessageList = mssgTypeList["yesterday"].map((message) => {
      var date = message.date.substring(0, 10);
      var time = message.date.slice(12);

        return (
            <li className="list-group-item" key={message.id}>
              Date: {date} <br></br>
              Time: {time} <br></br>
              Body: {message.body}
            </li>
        ) 
   })

  const WeekMessageList = mssgTypeList["this_week"].map((message) => {
      var date = message.date.substring(0, 10);
      var time = message.date.slice(12);

        return (
            <li className="list-group-item" key={message.id}>
              Date: {date} <br></br>
              Time: {time} <br></br>
              Body: {message.body}
            </li>
        ) 
  })

  return (
      <div id="messageList">

        <h2>Today</h2>
        <ul className="list-group today-group">
          {TodayMessageList}
        </ul>

        <h2>Yesterday</h2>
        <ul className="list-group yesterday-group">
          {YesterdayMessageList}
        </ul>

        <h2>This Week</h2>
        <ul className="list-group week-group">
          {WeekMessageList}
        </ul>

      </div>
    )

var currentDate=新日期（）
var currentDayOfMonth=currentDate.getDate（）
var currentDayOfWeek=currentDate.getDay（）
var timeline=“今天”
变量mssgTypeList={
“今天”：[]，
“昨天”：[]，
“本周”：[]
}
this.props.message.forEach（函数（消息、索引）{
var date=message.date.substring（0,10）
var time=message.date.slice（12）
var testDate=新日期（日期）
var testDayOfMonth=testDate.getDate（）+1
var testDayOfWeek=testDate.getDay（）
if（currentDayOfMonth==testDayOfMonth+1）{
时间线=‘昨天’
}else if（currentDayOfMonth>testDayOfMonth+1&¤tDayOfWeek-testDayOfWeek<6）{
时间线='本周'
}
mssgTypeList[timeline]。推送（消息）；
});
const TodayMessageList=mssgTypeList[“今天”].map（（消息）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(

日期：{Date}


时间：{Time}


正文：{message.Body}

)
});
const YesterdayMessageList=mssgTypeList[“昨天”].map（（消息）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(

日期：{Date}


时间：{Time}


正文：{message.Body}

) 
})
const WeekMessageList=mssgTypeList[“本周”].map（（消息）=>{
var date=message.date.substring（0,10）；
var time=message.date.slice（12）；
返回(

日期：{Date}


时间：{Time}


正文：{message.Body}

) 
})
返回(
今天

{TodayMessageList}

昨天

{YesterdayMessageList}

本周

{WeekMessageList}

)

首先，您需要根据时间线分离邮件，然后根据单独的邮件时间线列表在UI上显示邮件。
感谢您提供的信息性答案。我唯一担心的是，所有的MessageList组件——今天、昨天、本周——都是如此重复。他们之间的代码有一个字的区别。有没有一种方法可以最大限度地减少混乱？问题是，当您使用map时，您会为每个数组元素返回一些内容。在你的房间里