gatsby/react 中多维数组的 map() 方法，在 div 中尝试包装内部循环时出错

Question

我想在 gatsbyjs 网页中每行显示三个帖子。我有一组帖子，如果我要使用列显示，它只会在帖子容器 div 上应用多行 class。但我使用的是 bulma 中内置的 tiles 布局 css，不幸的是它不支持像列那样的多行。

所以我必须将每三个帖子包装在 div 和 class 'tile' 中。为此，我将数组分成 3 个大小的块（正如这里某人所建议的，多亏了他）现在它归结为循环遍历二维数组。

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

Answer 1

您需要将 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>
);

gatsby/react 中多维数组的 map() 方法，在 div 中尝试包装内部循环时出错

map() method on multi dimensional array in gatsby/react, getting error while trying to wrap inner loop in div

javascript

arrays

reactjs

gatsby

bulma