反应如何将每个 3 个元素包装在一个 div 中？答案

【问题标题】：React how to wrap each 3 elements in a div?反应如何将每个 3 个元素包装在一个 div 中？
【发布时间】：2022-01-24 14:34:27
【问题描述】：

这里的预期输出应该是蓝色 div 中的每 3 个 div（红色）。我不明白我做错了什么，因为这应该正常工作。

// tried this method, https://stackoverflow.com/questions/63695426/react-wrap-every-3-components-into-a-div can't get it to work. ????‍♂️

const ImageGrid = ({slice} :any) => (

  slice?.items?.map((item :any, i:number) => {
    const myArrx :any = []
    myArrx.push(<Box bg={'red'} p={15}><img src={item.image.url} alt={item.image.alt} /></Box>)
    
    return myArrx.reduce((groups :any, curr:any) => {
      const arr : any[] = groups[groups.length - 1];      
      arr.push(curr);
      if (arr.length === 3) groups.push([]);
      return <Box bg={'blue'} p={15}>{groups}</Box>;
    }, [[]])
    
  })

)

【问题讨论】：

标签： javascript reactjs typescript loops dictionary

【解决方案1】：

我一直在努力，这是简单而优雅的解决方案

const ImageGrid = ({slice} :any) => {
  const pack :any = []
  
  slice?.items?.map((item :any, i:number) => {
    pack.push(<Child data={item}/>)
  })
  
  const data2 = [...pack]
  const groupedData1 = []
  
  while(data2.length) {
    groupedData1.push(data2.splice(0, 3));
  }

  return (
    <>
      <Container maxW={1180} bg='orange'>
        <GridWrap>
          {groupedData1.map((el, i) => 
            <Parent>
              <HStack alignItems={'top'}> {el} </HStack>
            </Parent>
          )}
        </GridWrap>
      </Container>
    </>
  )
}

【讨论】：