javascript - 如何在从reactjs中的同一父组件获取的不同布局中呈现帖子

Question

我正在尝试在同一个子组件中呈现不同样式的帖子，就像这样。

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

这是我的代码。

src/views/home.js

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);

src/component/renderedPost.js

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}
    />)}
    </>
  )
}

component/PostsPreview.js // now here i am confused how to render posts like in the above picture.

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

    </div>
  )
}

Answer 1

您可以在帖子容器上将 display 设置为 flex，并添加一个名为 e.g. 的新 Prop 。 imageLeft，您为所有其他帖子设置为 true，并使用它来替代 row 和之间的 flex-direction row-reverse 交替图像位置。

示例

class Home extends React.Component {
  state = {
    posts: [
      { id: 0, title: "foo", imageURL: "https://placekitten.com/200/200" },
      { id: 1, title: "bar", imageURL: "https://placekitten.com/200/200" },
      { id: 2, title: "baz", imageURL: "https://placekitten.com/200/200" }
    ]
  };
  render() {
    return (
      <div>
        <RenderPost posts={this.state.posts} />
      </div>
    );
  }
}

function RenderPost(props) {
  return (
    <div>
      {props.posts.map((post, index) => (
        <PostPreview
          key={post.id}
          imageLeft={index % 2 === 0}
          title={post.title}
          image={post.imageURL}
        />
      ))}
    </div>
  );
}

function PostPreview({ image, imageLeft, title }) {
  return (
    <div
      style={{
        display: "flex",
        width: 200,
        flexDirection: imageLeft ? "row" : "row-reverse"
      }}
    >
      <div
        style={{
          backgroundImage: `url(${image})`,
          backgroundSize: "cover",
          flexGrow: 1
        }}
      />
      <h1>{title}</h1>
    </div>
  );
}

ReactDOM.render(<Home />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>