如何在同一个容器中按时间顺序呈现两个反应列表组？

Question

基本上，我想把这两个容器合并到一个容器中，其中一个容器的最新版本在顶部。

所以，与其说是

最近的帖子

次帖

三号岗

最近的活动

第二件事

第三件事

它是合并而成的。

最近的帖子

最近的第二个员额

最近的活动

最近的第二件事

第三件事

目前的代码是这样的。

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类？

两者都可以有函数，返回一个指定的postevent Component。对于post，它可以看起来像这样。

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

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

然后，你可以把React组件做成一个更通用的类。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 数组，无论你怎么想。主要的想法是，你必须提升状态（在这种情况下，状态是组件的顺序）。React Components不向其所有者返回数据。