Javascript 如何在reactjs中以不同的布局呈现来自同一父组件的帖子

我试图在同一个子组件中呈现不同风格的帖子，类似这样。

我在home组件中从wordpress api获取帖子，然后传递到RenderPost组件，在该组件中帖子被映射，然后传递到PostReview，在那里它被显示。在这里，我想显示我在上图中提供的帖子

这是我的密码

src/views/home.js

import React，{Component}来自'React'；
从“../layouts”导入布局；
从'react redux'导入{connect}；
从“../actions/postActions”导入{fetchPosts}；
从“道具类型”导入道具类型；
从“../components/RenderPost”导入RenderPost；
类Home扩展组件{
组件willmount（）{
this.props.fetchPosts（）；
}
render（）{
console.log（this.props.posts）
返回(
{this.props.posts&&}
);
}
}
Home.prototype={
fetchPosts:PropTypes.func.isRequired，
posts:PropTypes.array.isRequired
}
常量mapStateToProps=状态=>({
posts:state.posts.items，
})
导出默认连接（mapStateToProps，{fetchPosts}）（主）；

src/component/renderepost.js

从“React”导入React
从“/PostPreview”导入PostPreview；
导出默认函数RenderPost（道具）{
控制台日志（道具）；
返回(
{props.posts.map（post=>）}
)
}

component/PostsPreview.js//现在我不知道如何呈现上图中的帖子

从“React”导入React
导出默认函数postReview（{title}）{
返回(
{title}
)
}

您可以在post容器上将

显示设置为
flex
，并添加一个名为
imageLeft
的新道具，您可以为每个其他post设置为
true
，并使用该道具在
行
和
行反转
之间切换
弹性方向
，以切换图像位置

示例


class Home扩展了React.Component{
状态={
职位：[
{id:0，标题：“foo”，图像URL:https://placekitten.com/200/200" },
{id:1，标题：“栏”，图像URL:https://placekitten.com/200/200" },
{id:2，标题：“baz”，图像URL:“https://placekitten.com/200/200" }
]
};
render（）{
返回(
);
}
}
功能渲染器（道具）{
返回(
{props.posts.map（（post，index）=>(
))}
);
}
函数postReview（{image，imageLeft，title}）{
返回(
{title}
);
}
render（，document.getElementById（“根”））


import React, { Component } from 'react';
import Layout from '../layouts';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/postActions';
import PropTypes from 'prop-types';
import RenderPost from '../components/RenderPost';


class Home extends Component {
    componentWillMount() {
        this.props.fetchPosts();
    }
    render() {
        console.log(this.props.posts)
        return (
            <Layout>
                {this.props.posts &&  <RenderPost posts={this.props.posts}/>}
           </Layout>
        );
    }
}

Home.prototypes = {
    fetchPosts: PropTypes.func.isRequired,
    posts: PropTypes.array.isRequired
}

const mapStateToProps = state => ({
    posts: state.posts.items, 

})

export default connect(mapStateToProps, {fetchPosts})(Home);

import React from 'react'
import PostPreview from './PostPreview';
export default function RenderPost(props) {
    console.log(props);
  return (
    <>
    {props.posts.map(post => <PostPreview
        title={post.title.rendered}
        key={post.id}
        image={post.imageURL}
    />)}
    </>
  )
}

import React from 'react'
export default function PostPreview({title}) {
  return (
    <div>
          <h1>{title}</h1>

    </div>
  )
}