が反応 - セクション

Question

で表示するテキストメッセージを、私はセクションにテキストメッセージを表示する必要があります。

メッセージが今日受け取った、メッセージが昨日受け取った、メッセージは今週受け取った、メッセージが今月受け、その後ヶ月間隔で続けます。 ..

例：

私の試み：

ダッシュボード.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が毎回表示されています。これを修正する最も良い方法は何ですか？

さらに、メッセージを一般的に構造化するには、より良い方法を知っていますか？私はすべてのグループに対して​​を作成することを検討しています。今日は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

「メッセージ」という名前のコンポーネントを作成する必要があります。 そして、同様にリストコンポーネントを作成します。

• YesterdayMessageList（一つだけH2タグとメッセージが含まれています）
• TodayMessageListは（一つだけH2タグとメッセージが含まれています）
• ThisWeekMessageList（一つだけH2タグとメッセージが含まれています）

結局のところ、Dashboardコンポーネントには上記の3つのコンポーネントが含まれます。 YesterdayMessageList、私が思うTodayMessageList、ThisWeekMessageList