gatsby / react中多维数组上的map()方法,尝试在div中包装内部循环时出错 [英] map() method on multi dimensional array in gatsby/react, getting error while trying to wrap inner loop in div
问题描述
我想在gatsbyjs网页中每行显示三个帖子。我有一个帖子数组,如果我要使用列显示,那只会在帖子容器div上应用多行类。但是我使用的是内置于bulma css中的图块布局,不幸的是,它不支持多行赞列。
所以我必须将每三个帖子都包装在div中,类为'tile '。为此,我将数组分为3个大小的块(有人建议在这里,多亏了他),现在归结为遍历二维数组。
现在问题出在我在尝试将内部循环包装到div中时遇到语法错误(我是javascript / es6的新手,而且react / gatsby是我的新手,所以我希望这里有人会帮助我)是下面的代码,我将divs注释为我正在出错。所以如何在gatsby / react中将内部循环包装在div中。 TIA
return(
< div className = tile is-ancestor>
{chunks.map( (chunk)=> {
return(
// // chunk.map((edge)=> {
return (
< div className = tile is-parent is-4>
< div className = {`tile is-child notification $ {edge.node.frontmatter.type}`} >
< p className = is-7> {edge.node.frontmatter.date}< / p>
< h2 className =字幕是-5> ; {edge.node.frontmatter.title}< / h2>
< p> {edge.node.excerpt}< / p>
< / div>
< / div>
)
}
)
//< / div>
)
})}
< / div>
);
您需要将代码包装在该div中大括号{}为有效的JSX。就像您对第一个chunks.map所做的一样。
return(
< div className = tile is-ancestor>
{chunks.map((chunk)=> {
return(
< div class = tile>
{
chunk.map((edge)=> {
return(
< div className = tile is-parent is-4>
< div className = {`tile is-child notification $ {edge.node.frontmatter.type}`}>
< p className = is-7> {edge.node.frontmatter.date}< / p>
< h2 className = subtitle is-5> {edge.node.frontmatter.title}< / h2>
< p&g t; {edge.node.excerpt}< / p>
< / div>
< / div>
)
}
)
}
< / div>
)
})}
< / div>
);
i want to display three posts per row in a gatsbyjs web page. i am having an array of posts, if i were to display using columns it would be just applying the multiline class on the posts container div. but i am using tiles layout built-in in bulma css, unfortunately that don't support multiline likes columns do.
so i have to wrap every three posts in a div with class 'tile'. for which i split the array into chunks of 3 size each (as suggested by someone here, thanks to him) now it boiled down to looping through a two dimensional array.
now the problem is i am getting syntax error when trying to wrap the inner loop in a div (i am new to javascript/es6 and react/gatsby, so i am hoping someone here would help me out) below is the code, i commented out the divs for which i am getting error. so how to wrap the inner loop in a div in gatsby/react. TIA
return(
<div className="tile is-ancestor">
{chunks.map((chunk)=> {
return (
//<div class="tile">
chunk.map((edge) => {
return(
<div className="tile is-parent is-4">
<div className={`tile is-child notification ${edge.node.frontmatter.type}`}>
<p className="is-7">{edge.node.frontmatter.date}</p>
<h2 className="subtitle is-5">{edge.node.frontmatter.title}</h2>
<p>{edge.node.excerpt}</p>
</div>
</div>
)
}
)
//</div>
)
})}
</div>
);
You would need to wrap the code inside that div in curly braces { } to be valid JSX. Just like you did with the first chunks.map.
return(
<div className="tile is-ancestor">
{chunks.map((chunk)=> {
return (
<div class="tile">
{
chunk.map((edge) => {
return(
<div className="tile is-parent is-4">
<div className={`tile is-child notification ${edge.node.frontmatter.type}`}>
<p className="is-7">{edge.node.frontmatter.date}</p>
<h2 className="subtitle is-5">{edge.node.frontmatter.title}</h2>
<p>{edge.node.excerpt}</p>
</div>
</div>
)
}
)
}
</div>
)
})}
</div>
);
这篇关于gatsby / react中多维数组上的map()方法,尝试在div中包装内部循环时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!