从传递并呈现到一个组件的帖子数组中,我希望能够将此数组的单个帖子呈现到另一个组件中,但我找不到这样做的方法。
我有两个组件用于本案例,第一个组件“Blog”呈现阵列中所有帖子的预览。每个帖子都有一个<Link to={
/ blog / post-1 /:$ {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;
第二部分帖子:
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);
},
},
我刚将这些路线添加到反应锅炉板中的routes.js。 在这一点上,我不知道如何传递单个帖子来渲染。任何帮助将不胜感激
答案 0 :(得分:2)
首先,您需要在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
最后,您将使用这些道具来呈现列表,基本上使用this.props.posts
组件上的BlogPage
,类似于此:https://github.com/mxstbr/react-boilerplate/blob/master/app/containers/HomePage/index.js#L76
获得列表渲染器后,您需要在另一个文件夹中创建PostPage
组件,然后connect
包含数据的reducer,并从您收到的ID中获取该项目。 URL参数,(通常代替您向服务器请求数据,但为了简单起见,只需从现有的reducer中获取帖子)。
这里的想法是使用redux来管理数据,这样你就可以使用connect
将数据发送到任何组件,并将状态映射到道具。
PS:在定义路线时不要忘记注入减速器:https://github.com/mxstbr/react-boilerplate/blob/master/app/routes.js#L33这是非常重要的一步;)