如何在React中从数组渲染随机对象? [英] How to render random objects from an array in React?
问题描述
我刚刚开始在工作中学习React,我需要使用React构建一个博客.经过研究后,我需要将随机帖子显示为推荐的帖子",我使用Math.random()找到了可能的解决方案,但无法弄清楚如何在组件中实现它.
I just started learning React in my work and I need to build a blog using React. I need to show random posts as "recommended Posts", after doing some research I found a possible solution, using Math.random() but I could not figure it out how to implement it in my component.
这是我的代码:
RecommendedPost/index.js
RecommendedPost/index.js
import React from 'react';
import { Link } from 'react-router';
class RecommendedPosts extends React.Component {
render() {
return (
<ul>
{this.props.posts.map((post, idx) => {
return (
<li key={idx}>
<p>{post.title}</p>
<p>{post.text}</p>
<p>{post.category}</p>
<Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
</li>
);
})}
</ul>
);
}
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;
然后我在容器中使用此组件: BlogPage/SinglePostPage/index.js
Then I use this component in my container: BlogPage/SinglePostPage/index.js
import React from 'react';
// ...other imported stuff
import RecommendedPosts from 'components/Blog/RecommendedPosts';
class PostPage extends React.Component {
render() {
// dummy-recomended-posts
const posts = [
{
id: 1,
title: 'How to Cook Blue Meth',
description: 'Lorem ipsum dolor sit amet, turpis at, elit',
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, elit',
thump: 'thump.jpg',
hero: '/img/',
category: 'k2',
fullname: 'Chino Moreno',
published: '10.05.2016, 15:30pm',
},
// ...and more dummy posts(about 7)
];
return (
<div>
// here, I pass the posts array to my component
<RecommendedPosts posts={posts} />
</div>
);
}
}
}
export default connect(null, mapDispatchToProps)(PostPage);
我的想法是使用ID作为参考来随机渲染帖子,但我仍然找不到方法.
My idea is to render the posts randomly using the id as a ref but again I can't find the way.
希望有人可以帮助我,如果答案对每个人都太明显,则对不起.
Hope some one can help me, and sorry if the answer is too obvious for everyone.
推荐答案
我继续为您创建了一个有效的示例
I went ahead and created a working example for you
import React from 'react';
import { Link } from 'react-router';
function shuffleArray(array) {
let i = array.length - 1;
for (; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
class RecommendedPosts extends React.Component {
render() {
const shuffledPosts = shuffleArray(this.props.posts);
return (
<ul>
{shuffledPosts.map((post) => {
return (
<li key={post.id}>
<p>{post.title}</p>
<p>{post.text}</p>
<p>{post.category}</p>
<Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
</li>
);
})}
</ul>
);
}
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;
奖金提示-由于您不使用状态或生命周期,因此您可以创建一个更简单的功能组件,例如:
Bonus tip - since you're not using state or lifecycle, you can create a much simpler functional component as such:
import React from 'react';
import { Link } from 'react-router';
function shuffleArray(array) {
let i = array.length - 1;
for (; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function RecommendedPosts({ posts }) {
const shuffledPosts = shuffleArray(posts);
return (
<ul>
{shuffledPosts.map((post) => {
return (
<li key={post.id}>
<p>{post.title}</p>
<p>{post.text}</p>
<p>{post.category}</p>
<Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
</li>
);
})}
</ul>
);
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;
这篇关于如何在React中从数组渲染随机对象?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!