Блог

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

Я получаю сообщения из 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 amp;amp;  <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 // теперь я запутался, как отображать сообщения, как на картинке выше.

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

    </div>
  )
}
  

Вы могли бы установить display значение flex в контейнере post и добавить новый реквизит с именем, например, imageLeft который вы устанавливаете на true для любого другого post, и использовать это для замены flex-direction между row и 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>