Question

我需要分段显示短信：

今天收到的消息，昨天收到的消息，本周收到的消息，本月收到的消息，以及在此之后的一个月间隔内继续...

示例：

我的尝试：

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

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

但是，我的应用看起来像这样：

每次都会显示H2。解决这个问题的最佳方法是什么？

此外，任何人都知道更好的方法来构建消息吗？我正在考虑为每个群组制作subcomponents：今天为component，昨天为component。

由于

Answer 1

我认为，这就是你需要修改渲染方法的方法：

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

首先，您需要根据时间轴分离消息，然后根据单独的时间线消息列表在UI上显示消息。

Answer 2

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

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

毕竟，在仪表板组件中将包含3个以上组件。 YesterdayMessageList，TodayMessageList，ThisWeekMessageList

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

2 个答案: