如何將對象從數組渲染到React中的另一個組件？

Question

從傳遞並渲染到一個組件的帖子數組中，我希望能夠將此數組的單個帖子渲染到另一個組件中，但是我找不到解決方法。

在這種情況下，我有兩個組件，第一個組件“博客”呈現數組中所有帖子的預覽。 每個帖子都有一個<Link to={ blog }>Go to post</Link> $ <Link to={ post.id} }>Go to post</Link>到第二個組件“ Post”，該組件從數組中呈現單個帖子。 我為此使用反應爐板。

首先，我的容器中有一組虛假的帖子：

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

這是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;

和第二個組件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

首先，您需要在化簡器中定義數據，這樣就可以將其發送到所需的任何頁面。

在這種情況下，我建議您在containers文件夾中創建兩個文件夾，一個用於發布列表，一個用於單個發布。

您將需要定義一個化簡器來存儲帖子列表（而不是在組件本身中定義列表），看看樣板中已經存在的代碼： https : //github.com/mxstbr/react-boilerplate /blob/master/app/containers/HomePage/reducer.js

然后您需要將reducer與組件連接，並通過組件prop映射redux狀態，如下所示： https : //github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js ＃L139

最后，您將使用這些道具來呈現列表，基本上this.props.posts在BlogPage組件上使用this.props.posts ，類似於以下內容： https : //github.com/mxstbr/react-boilerplate/blob/master/app/containers/首頁/ index.js＃L76

擁有列表渲染器后，您需要在其他文件夾中創建PostPage組件，然后connect包含數據的reducer並從URL參數中接收的ID中獲取項目（通常不是您請求的ID）到服務器的數據，但為簡單起見，只需從現有的reducer獲取帖子即可。

這里的想法是使用redux來管理數據，這樣您就可以使用connect並將狀態映射到props來將數據發送到任何組件。

PS：在定義路線時，請不要忘記注入減速器： https : //github.com/mxstbr/react-boilerplate/blob/master/app/routes.js#L33這是非常重要的一步;）