作出反应 - 在部分

我需要的部分，以显示文本信息显示短信：作出反应 - 在部分

消息今天收到，昨天收到的消息，本周收到的消息，这个月收到的消息，并保持在此后一个月的时间间隔去。 ..

例子：

我尝试：

仪表板.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正在显示每次。解决这个问题的最好方法是什么？

此外，任何人都知道更好的方式来构造一般的消息？我正在考虑为每个组制作：今天的A component，昨天的component。

谢谢

来源

2017-04-23 user2456977

我想，这是你如何需要修改你的渲染方法：

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消息基于独立时间表消息列表。

来源

2017-04-23 04:32:32 Nitesh

感谢您提供丰富的答案。我唯一担心的是MessageList组件 - 今天，昨天，本周 - 都是如此重复。它们之间的代码有一个字的区别。有没有办法减少杂波？ – user2456977

问题是当你使用map时，你会为每个数组元素返回一些东西。在你的messageList中，所有三种消息都混合在一起。因此，当您在UI上展示它时，您不确定您显示哪种类型的消息。我只能想到将他们分组在一起，然后逐一展示给他们。不确定，如果有其他方式有你想要的方式。 – Nitesh

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

YesterdayMessageList（只包含一个H2标签和消息）
TodayMessageList（只包含一个H2标签和消息）
ThisWeekMessageList（只包含一个H2标签和消息）

毕竟，在Dashboard组件中会包含3个以上的组件。 YesterdayMessageList，TodayMessageList，ThisWeekMessageList

来源

2017-04-23 03:30:30

作出反应 - 在部分

回答

相关问题