Question

我是React.js的新手，很喜欢它，但是我一直遇到下面这样的小问题。我正在尝试每两个map（）迭代周期调用<GridItem>组件。但是，它抛出Unxpected token issue on </GridItem>。我猜这是因为编译器无法正确看到<GridItem>。在这种情况下，人们通常如何解决问题？我想在每个<Card>下渲染每个两个<GridItem>组件。

{store.promotion_set.map((promo, index) => {
    <GridContainer>
        {index % 2 === 0 && <GridItem xs={12} sm={12} md={6} lg={6}>}
            <Card className={classes.card} key={promo.id}>
                ...
            </Card>
        {index % 2 === 0 && </GridItem>}
    </GridContainer>
})}

更新

我需要在每个<Card>组件中有两个<GridItem>组件，所以我认为我需要将if条件分别放在打开和关闭组件上。在React中有可能吗？

Answer 1

您处在正确的轨道上，但是呈现卡的方式不正确。尝试以下方法：

{store.promotion_set.filter((promo, index) => {
    <GridContainer>
        {index % 2 === 0 && (
         <GridItem xs={12} sm={12} md={6} lg={6}>
            <Card className={classes.card} key={promo.id}>
                ...
            </Card>
        </GridItem>
        )}
    </GridContainer>
})}

将map切换为filter可使您根据索引值有条件地呈现组件，而不会由于未定义的return语句而导致任何错误。另外，您的{}可以运行其中的任何JS，因此您只需要在开始时运行条件检查，而无需将组件包装在检查中。

Answer 2

尝试三元运算符：

{store.promotion_set.map((promo, index) => {
    <GridContainer>
        {index % 2 === 0 ? <GridItem xs={12} sm={12} md={6} lg={6}>
            <Card className={classes.card} key={promo.id}>
                ...
            </Card>
        </GridItem>
        : null
       }
    </GridContainer>
})}

更新，我可能会将您的条件渲染移到类似这样的地方：

store.promotion_set.map((promo, index) => {
    return index % 2 === 0 ? <GridContainer>
        <GridItem xs={12} sm={12} md={6} lg={6}>
            <Card className={classes.card} key={promo.id}>
                ...
            </Card>
            <Card> ... </Card>
        </GridItem>
    </GridContainer> : <GridContainer></GridContainer>
  )

因为似乎要基于索引有条件地呈现整个选择，或者只是基于空白的<GridContainer>。我还在条件渲染的Card中添加了两个GridItem组件。

Answer 3

理想情况下，您希望数据结构promotion_set以两个为一组，这样您只需要在render函数中使用两个.map()方法即可：

promotion_set = [[card1, card2], [card3, card4]]

那么您可以将其渲染为：

promotion_set.map(item => <GridItem>
    {item.map(promo => <Card className={classes.card} key={promo.id}>
     ...
    </Card>)}
</GridItem>)

但是，如果无法以这种方式转换数组，则可以在迭代并渲染两张卡片时跳过奇数索引：

{store.promotion_set.map((promo, index) => {
    <GridContainer>
       {index % 2 === 0 && <GridItem xs={12} sm={12} md={6} lg={6} key={promo.id}>
           <Card className={classes.card}>
               {store.promotion_set[index].cardText}
           </Card>
           <Card className={classes.card}>
               {store.promotion_set[index+1].cardText}
           </Card>
       </GridItem>
      }
   </GridContainer>
})}

如何在React中每两个迭代渲染一次组件？

3 个答案: