Как визуализировать две группы реагирующих списков в одном и том же контейнере в хронологическом порядке

Question

По сути, я собираюсь объединить два контейнера в один контейнер, причем самый последний из них находится сверху.

Так что вместо

Последнее сообщение

второе недавнее сообщение

третье недавнее сообщение

последнее событие

второе недавнее событие

третье недавнее событие

Объединено:

Самое последнее сообщение

Второе последнее сообщение

Самое последнее событие

треть недавний пост econd недавнее событие

третье недавнее событие

Вот как выглядит код в данный момент:

render() {
    return (
      <div>
        <MenuBar />
        <div className="row">
          <div className="col-lg-8 col-md-6 col-sm-12">
            <PostContainer />
            <EventContainer />
          </div>
        </div>
      </div>
    );
  }

Эти "контейнеры" идентичны:

render(){
    return (
      <ListGroup>
        {this.state.posts.map((post) => (
          <PostView
            key={post.id}
            id={post.id}
            title={post.title}
            description={post.description}
            region={REGION_CHOICES[post.region]}
            datetimeCreated={post.datetime_created}
            creator={post.creator}
            likedUsers= {post.liked_users}
            taggedUsers={post.tagged_users}
            handleLike={this.handleLike}
          />
        ))}
      </ListGroup>
    )
  }
}

Есть идеи? Спасибо всем

Answer 1

Можно ли изменить PostContainer и EventContainer на простые javascript классы?

Оба могут иметь функции, которые возвращают указанный компонент сообщения / события. Для постов это может выглядеть примерно так:

class Posts {
    var postStore = [PostComponent1, PostComponent2, ...]

    function getPost(index) {
        return postStore[index];
    }
}

Затем вы можете сделать React Component более универсальным c классом Container, который выполняет что-то вроде этого:

import posts from './posts'
import events from './events'

class Container extends React.Component {
    constructor(props) {
        var postsAndEvents = [];
        for (i = 0; i < 3; i++) {
            postsAndEvents.push(posts.getPost(i))
            postsAndEvents.push(events.getEvent(i))
        }
    }

    render() {
        return(
            <div>
                {postsAndEvents.map((Component) => {
                    return <Component />
                })}
            </div>
        )
    }
}

Вы можете построить массив postsAndEvents, как хотите sh. Основная идея заключается в том, что вы должны поднять состояние (в этом случае состояние является порядком компонентов). Компоненты React не возвращают данные своим владельцам.