从卡片数组中每三行创建分隔线

Question

大家好，我正在尝试为每行 3 个项目创建一个分隔线这是我当前的设置，但问题是我只处理两组行，并且可以有无限数量的行我正在使用 slice 来获取前两行

分隔线不能位于地图内部，因为它需要放置在容器外部。分隔符需要放置在每两行之间。目前只处理两行，但需要处理多于两行。

代码笔示例 https://codesandbox.io/s/summer-firefly-xzymsp?file=/src/App.tsx

Answer 1

您可以尝试准备您的 OpenGraphGridDate 并将其排列成行。这样就很容易使用两个嵌套的地图功能。

const OpenGraphGridModule = () => {
  const rows = OpenGraphGridData.reduce((rows,el)=> {
    if(rows[rows.length-1].length >= 3){
      rows.push([]);
    }
    rows[rows.length-1].push(el);
    return rows;
  },[[]]);

  return (
    <>
      {rows.map((row,i) => 
        (
          <>
            <Container>
            {row.map(el => (
              <Card />
            ))}
            </Container>
            {(i < rows.length-1) ? (
              <DividerContainer>
                <Divider />
              </DividerContainer>
            ) : null}
            
          </>
        )
      )}
    </>
  )

从卡片数组中每三行创建分隔线

Creating dividers in every three rows from an array of cards

javascript

arrays

grid

reactjs

material-ui