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

Question

从传递和呈现到一个组件的一组帖子中，我希望能够将此数组的单个帖子呈现到另一个组件中，但我找不到执行此操作的方法。

我有两个组件用于这种情况，第一个组件“Blog”呈现数组中所有帖子的预览。每个帖子都有一个 <Link to={/blog/post-1/:${post.id} }>Go to post</Link>到第二个组件“Post”，它从数组中呈现单个帖子。我正在为此使用 React 样板。

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

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

这是博客的第一个组件:

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;

第二个组件 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;

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

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

这是我的路线:

{
  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);
  },
},

我刚刚将此路由添加到 React 样板中的 routes.js。在这一点上，我不知道如何通过单个帖子来渲染。任何帮助将不胜感激

Answer 1

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

在这种情况下，我建议您在 containers 文件夹中创建两个文件夹，一个用于帖子列表，一个用于单个帖子。

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

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

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

一旦你有了列表渲染器，你需要在不同的文件夹中创建 PostPage 组件，然后 connect 包含数据的 reducer 并从您在 URL 参数中收到的 ID(通常不是您向服务器请求数据，但为了简单起见，只需从现有的 reducer 获取帖子)。

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

PS:不要忘记在定义路由时注入(inject)你的 reducer :https://github.com/mxstbr/react-boilerplate/blob/master/app/routes.js#L33这是非常重要的一步；)