![](/img/trans.png)
[英]How can I get two non-repeated random objects from an array at first render in React?
[英]How to render random objects from an array in React?
我刚开始在我的工作中学习 React,我需要使用 React 构建一个博客。 我需要将随机帖子显示为“推荐帖子”,在做了一些研究后,我找到了一个可能的解决方案,使用 Math.random() 但我无法弄清楚如何在我的组件中实现它。
这是我的代码:
推荐帖子/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
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 作为参考随机呈现帖子,但我再次找不到方法。
希望有人可以帮助我,如果答案对每个人来说都太明显了,我很抱歉。
我继续为您创建了一个工作示例
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;
额外提示 - 由于您没有使用状态或生命周期,您可以创建一个更简单的功能组件:
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;
在您推荐的帖子中,首先将帖子洗牌并将其存储在状态中,然后进行渲染
import React from 'react';
import { Link } from 'react-router';
class RecommendedPosts extends React.Component {
constructor() {
super(props);
this.state = {
posts: this.shuffle(this.props.posts)
}
}
shuffle(posts){
///shuffle using some algo
return posts
}
render() {
return (
<ul>
{this.state.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;
您可以使用 lodash shuffle 函数来随机化您的数组,然后通过从该数组中获取数据来简单地呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.