时间戳

首页 > 解决方案 > gatsby/react中多维数组上的map（）方法，尝试在div中包装内部循环时出错

javascript - gatsby/react中多维数组上的map（）方法，尝试在div中包装内部循环时出错

问题描述

我想在 gatsbyjs 网页中每行显示三个帖子。我有一个帖子数组，如果我要使用列显示它只是在帖子容器 div 上应用多行类。但我正在使用bulma css中内置的瓷砖布局，不幸的是，它不支持多行喜欢的列。

所以我必须将每三个帖子包装在一个带有“tile”类的 div 中。为此，我将数组分成每个大小为 3 的块（正如这里的某人所建议的，感谢他）现在它归结为循环遍历二维数组。

现在的问题是我在尝试将内部循环包装在 div 中时遇到语法错误（我是 javascript/es6 和 react/gatsby 的新手，所以我希望这里有人能帮助我）下面是代码，我评论了出我得到错误的div。那么如何将内部循环包装在 gatsby/react 中的 div 中。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>
);

标签： javascriptarraysreactjsgatsbybulma

解决方案

您需要将 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>{edge.node.excerpt}</p>
                              </div>
                            </div>
                          )
                        }
                      )
                     }
                    </div>
                    )
            })}
        </div>
);

推荐阅读