我目前有以下几个对象，其中有十二个：
{
data:[
{
type:"tweets",
id:"1",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https://twitter.com/Javi" target="_blank">@Javi</a> this photos in accurate,
the front went down causing the back to go up. Hahaha",
time_ago:"13 hours ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"2",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https://twitter.com/jesse_squires" target="_blank">@jesse_squires</a> C?",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"3",
attributes:{
user_name:"AKyleAlex",
tweet:"Working on my new site :) Super exited.",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"4",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https://twitter.com/javi" target="_blank">@javi</a> Oh. Well what a troll.",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"5",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https://twitter.com/javi" target="_blank">@javi</a> was there a reason they need to stay? a specific reason?",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"6",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https://twitter.com/pearsonified" target="_blank">@pearsonified</a> ugh,
welcome to 27,
the new 38",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"7",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https: //twitter.com/bobbybigwheel" target="_blank">@bobbybigwheel</a> <a href="https://twitter.com/_alastair" target="_blank">@_alastair</a> ha!",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"8",
attributes:{
user_name:"AKyleAlex",
tweet:"RT <a href=" https: //twitter.com/dan_abramov" target="_blank">@dan_abramov</a>: Redux being ported to Swift: <a href="https: //t.co/JLnIXivsG8" target="_blank" rel="nofollow">https://t.co/JLnIXivsG8</a>",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"9",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https: //twitter.com/queerdiscox" target="_blank">@queerdiscox</a> <a href="https: //twitter.com/stanboyet" target="_blank">@stanboyet</a> because:racism",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
},
{
type:"tweets",
id:"10",
attributes:{
user_name:"AKyleAlex",
tweet:"<a href=" https: //twitter.com/ashfurrow" target="_blank">@ashfurrow</a> <a href="https://twitter.com/javi" target="_blank">@javi</a> I loved ate the original article so hard ….",
time_ago:"1 day ago",
created_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
},
updated_at:{
date:"2015-12-23 06:15:19.000000",
timezone_type:3,
timezone:"UTC"
}
}
}
]
}
现在出于这些目的。我已经通过执行以下操作将数据保存到变量：
self.setState({tweets: data.data});
data是上面的对象。
在React中我正在做（ES6）：
buildTweets() {
var tweets = this.state.tweets.map(function(tweet){
return (
<div className="col-lg-4 cl-md-4 col-sm-6 col-xs-12" key={tweet.id}>
<strong>{tweet.attributes.user_name}</strong>
<p><span dangerouslySetInnerHTML={{__html: tweet.attributes.tweet}} /></p>
<p><em>Posted: {tweet.attributes.time_ago}</em></p>
</div>
);
});
return tweets;
}
返回并在render方法中使用它：
return (
<div className="row">
{this.buildTweets()}
</div>
)
现在这个，大部分都有效。我把所有12条推文都列回了专栏。接受它应该是3列col-lg-4 col-md-4 col-sm-6 col-xs-12而不是12列，就像现在一样。
任何想法如何实现这一目标？
答案 0 :(得分：1)
[更新：正如所指出的，我完全忘记了行！]
我假设您在这里真正要求的是拥有一堆行，每行最多有三列，具体取决于您已指定的大小。就这样：
map()函数还将当前索引作为其第二个参数。但是，由于您真正想要的是与原始数据大小不同的数组，因此我们将使用forEach而不是map。使用那个+一些数学，我们可以完成你想要的东西（顺便说一句，我已经完成了ES6：D）：
buildTweets () {
let rows = [];
let currCols;
this.state.tweets.forEach((tweet, i) => {
if(i % 3 === 0) { // Start of a new row
if(i > 0) {
currRows.push(
<div className='row'>
{currCols}
</div>
);
}
currCols = [];
rows[currRow] = [];
}
currCols.push(
<div className='col-lg-4 cl-md-4 col-sm-6 col-xs-12' key={tweet.id}>
<strong>{tweet.attributes.user_name}</strong>
<p><span dangerouslySetInnerHTML={{__html: tweet.attributes.tweet}} /></p>
<p><em>Posted: {tweet.attributes.time_ago}</em></p>
</div>
);
});
// Handle the last row
if(currCols.length > 0) {
currRows.push(
<div className='row'>
{currCols}
</div>
);
}
return rows;
},
render () {
return (
<div id='tweetRowContainer'>
{this.buildTweets()}
</div>
);
}
这应该为您提供Math.ceil(tweets / 3)行。每行都承诺有3条推文，除了最后一行有1-3条推文。