如何在React中将数组中的对象渲染到另一个组件中？

From an array of posts that are passed and rendered to one component, I want to be able to render a single post of this array into another component but I can't find a way to do this.

从传递并呈现到一个组件的帖子数组中,我希望能够将此数组的单个帖子呈现到另一个组件中,但我找不到这样做的方法。

I have two components that I use for this case, the first component "Blog" renders a preview of all the posts that are in the array. Each post has a<Link to={/blog/post-1/:${post.id}}>Go to post</Link> to the second component "Post" which renders a single post from the array. I am using react boiler plate for this.

我在这种情况下使用了两个组件,第一个组件“Blog”呈现了数组中所有帖子的预览。每个帖子都有一个 Go to post 到第二个组件“Post”,它从数组中呈现一个帖子。我正在使用反应锅炉板。

First my container who has a dummy array of posts:

首先我的容器有一个虚拟的帖子数组:

import React from 'react';
// other imported stuff
import Blog from 'components/Blog';

class BlogPage extends React.Component {

render() {
// dummy posts data
const posts = [
  {
    id: 1,
    title: 'How to Cook Blue Meth',
    description: 'Lorem ipsum dolor sit amet, turpis at',
    thump: 'thump.jpg',
    hero: '/img/',
    category: 'k1',
    fullname: 'Walter White',
    published: '10.05.2016, 15:30pm',
  },
  {
    id: 2,
    title: 'Passenger',
    description: 'Lorem ipsum dolor sit amet, turpis at',
    thump: 'thump.jpg',
    hero: '/img/',
    category: 'k2',
    fullname: 'Chino Moreno',
    published: '10.05.2016, 15:30pm',
  },
  // and more posts...
];
return (
// this is the first component
   <div>
     <Blog posts={posts} />
   </div>
   );
  }
}
export default connect(null, mapDispatchToProps)(BlogPage);

Here is the first component Blog:

这是Blog的第一个组件:

import React from 'react';
import { Link } from 'react-router';

class Blog extends React.Component {

renderPosts() {
  return (
    <ul>
      {this.props.posts.map((post, idx) => {
        return (
          <li key={idx}>
            <p>{post.title}</p>
            <p>{post.category}</p>
            <p>{post.thump}</p>
            <p>{post.fullname}</p>
            <p>{post.published}</p>
            <Link to={`/blog/post-1/:${post.id}`}>Go to post </Link>
          </li>
         );
       })}
    </ul>
   );
}
render() {
  return (
    <div>
      {this.renderPosts()}
    </div>
  );
 }
}
Blog.propTypes = {
  props: React.PropTypes.array,
};
export default Blog;

And the second component Post:

第二部分帖子:

import React from 'react';

class Post extends React.Component {

render() {
  return (
     <div>
       <p>{this.props.post.hero}</p>
       <p>Title:{this.props.post.title}</p>
       <p>{this.props.post.description}</p>
       <p>Category:{this.props.post.category}</p>
       <p>{this.props.post.thump}</p>
       <p>Author:{this.props.post.fullname}</p>
       <p>Published:{this.props.post.published}</p>
     </div>
  );
 }
}
Post.propTypes = {
  post: React.PropTypes.object,
};
export default Post;

I import this second component into another container:

我将第二个组件导入另一个容器:

import React from 'react';
import Post from 'components/Blog/Post';

class PostPage extends React.Component {

 render() {
    return (
     <div>
       <Post post={post} />
     </div>
    );
 }
}
export default connect(null, mapDispatchToProps)(PostPage);

This are my routes:

这是我的路线:

{
  path: '/blog',
  name: 'blog',
  getComponent(nextState, cb) {
    System.import('containers/BlogPage')
      .then(loadModule(cb))
      .catch(errorLoading);
  },
},
{
  path: '/blog/post-1/:id',
  name: 'blog-post-1',
  getComponent(nextState, cb) {
    System.import('containers/BlogPage/PostPage')
      .then(loadModule(cb))
      .catch(errorLoading);
  },
},

I just added this routes to the routes.js in the react boiler plate. In this point I don't know how to pass the single post to get rendered. Any help would be appreciated

我刚刚将这些路线添加到反应锅炉板中的routes.js。在这一点上,我不知道如何传递单个帖子来渲染。任何帮助,将不胜感激

1 个解决方案

#1

First you need to define the data in the reducer, that way you will be able to send it to any page that you want.

首先,您需要在reducer中定义数据,这样您就可以将它发送到您想要的任何页面。

In this case I would recommend you to create two folders inside the containers folder, one for the lists of post and one for the single post.

在这种情况下,我建议您在容器文件夹中创建两个文件夹,一个用于发布列表,另一个用于单个帖子。

You will need to define a reducer to store the list of posts (instead of defining the list in the component itself), take a look at the code already in the boiler plate: https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/reducer.js

您需要定义一个reducer来存储帖子列表(而不是在组件本身中定义列表),看一下锅炉板中已有的代码:https://github.com/mxstbr/react-boilerplate /blob/master/app/containers/HomePage/reducer.js

Then you need to connect the reducer with the component and map the redux state with the component props, like this: https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js#L139

然后你需要将reducer与组件连接起来并将redux状态映射到组件props,如下所示:https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js #L139

Finally you would use those props to render the list, basically using this.props.posts on your BlogPage component, something similar to this: https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js#L76

最后,您将使用这些道具来呈现列表,基本上在BlogPage组件上使用this.props.posts,类似于:https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/首页/ index.js#L76

Once you have the list renderer you will need to create the PostPage component in a different folder, then connect the reducer that contains the data and get the item from the ID you are receiving in the URL param, (usually instead of that you would request to the server the data, but for the sake of simplicity just get the post from the existing reducer).

获得列表渲染器后,您需要在另一个文件夹中创建PostPage组件,然后连接包含数据的reducer并从URL参数中接收的ID中获取项目(通常代替您要求的到服务器的数据,但为了简单起见,只需从现有的reducer中获取帖子)。

The idea here is to use redux to manage the data, that way you will be able to send data to any component, using the connect and mapping the state to the props.

这里的想法是使用redux来管理数据,这样你就可以使用connect和将状态映射到props来向任何组件发送数据。

PS: Don't forget to inject your reducer when defining the route: https://github.com/mxstbr/react-boilerplate/blob/master/app/routes.js#L33 this is a very important step ;)

PS:在定义路线时不要忘记注入减速机:https://github.com/mxstbr/react-boilerplate/blob/master/app/routes.js#L33这是非常重要的一步;)