Question

我正在尝试将每月部分的邮件列表分组。每次月份更改时，我都要添加标题<h2>Previous Month</h2>，然后显示该月份的所有邮件。

这是我的尝试：

MessageList.js

import React from "react"

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

  render() {

      var currentDate = new Date()
      var currentMonth = currentDate.getMonth()
      var timeline=""

      var mssgTypeList = {
        "this_month" : [],
        "last_month" : [],
        "previous_month" : []
       }

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

          var messageDate = new Date(date)
          var messageMonth = messageDate.getMonth()

          if(currentMonth == messageMonth) {
            timeline == 'this_month'
          } else if(currentMonth == messageMonth + 1){
            timeline = 'last_month'
          } else if(currentMonth == messageMonth + 2) {
            timeline = 'previous_month'
          }

          mssgTypeList[timeline].push(message);

       });

       const ThisMonthMessageList = mssgTypeList["this_month"].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 LastMonthMessageList = mssgTypeList["last_month"].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 PreviousMonthMessageList = mssgTypeList["previous_month"].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>This Month</h2>
            <ul className="list-group this-month-group">
              {ThisMonthMessageList}
            </ul>

            <h2>Last Month</h2>
            <ul className="list-group last-month-group">
              {LastMonthMessageList}
            </ul>

            <h2>Previous Month</h2>
            <ul className="list-group previous-month-group">
              {PreviousMonthMessageList}
            </ul>
          </div>
         )
       }

这里的问题是，这只会产生有限数量的月度部分;基本上我在mssgTypeList中硬编码的部分。每当月份发生变化时，它都不会动态创建新的部分。

每次月份更改时，如何动态生成新部分？

或者是否有其他方法可以在每月的部分中对邮件进行排序？也许创建其他组件？

Answer 1

你走在正确的轨道上。请注意，{ThisMonthMessageList}不是硬代码，而是您构建它。那么你可以为整个消息列表做同样的事情。您的render返回语句将如下所示：

  return (
      <div id="messageList">
        {messageList}
      </div>
  );

希望这足以让你以正确的方式思考这个问题。

Answer 2

将componentWillReceiveProps方法中的所有依赖于道具的逻辑放在componentDidMount函数中并且应该存在于componentWillReceiveProps函数中可能更好一点，因为export default class MessageList extends React.Component { constructor() { super(); this.state = { msgTypeList : { } } } componentDidMount() { var currentDate = new Date() var currentMonth = currentDate.getMonth() var messageTypeList = {} this.props.messages.forEach((message, index) => { var date = message.date.substring(0, 10) var messageDate = new Date(date) var messageMonth = messageDate.getMonth(); messageTypeList[messageMonth].push(message); }) this.setState({messageTypeList}); } componentWillReceiveProps(nextProps) { var currentDate = new Date() var currentMonth = currentDate.getMonth() var timeline="" var messageTypeList = {} nextProps.messages.forEach((message, index) => { var date = message.date.substring(0, 10) var messageDate = new Date(date) var messageMonth = messageDate.getMonth(); messageTypeList[messageMonth].push(message); }) this.setState({messageTypeList}); } render() { return ( <div id="messageList"> {Object.keys(this.state.messageTypeList).map((key) => { return ( <div> <h2>{key}</h2> <ul className="list-group"> {this.state.messageTypeList[key].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> ) })} </ul> </div> ) }) } </div> ) }没有被调用最初的时间。在渲染中拥有所有这些逻辑也很昂贵，因为渲染被称为任何状态变化。

动态渲染可以通过以下方式实现，但是如果将包含年份的月份作为关键字包含它会更好。

$.ajax({
   url: 'deptdata.php',
   type: "POST",
   contentType: "application/json; charset=utf-8",
   data: {dept: depts},
   dataType: "json",
      success: function (data) {
        console.log(data);

   },
      error: function (data) {

        alert('error');

        }
      });

React - 在每月部分

2 个答案: