Reactjs 基于映射索引的React引导有条件渲染

我正在使用react引导创建一个4列网格，并希望在每个idx%4==0迭代时呈现一个

标记，在每个idx%4==3迭代时呈现一个

render(){

   {items.map( (item, idx) => (
       idx%4==0? <Row> : '' 

       <Col key={item} lg={3}>
            ....
       <Col>

       idx%4==3? </Row> : ''

    }
}

render（）{
{items.map（（item，idx）=>(
idx%4==0？：“”
....
idx%4==3？：“”
}
}

有可能做到这一点吗？如果没有结束标记，我似乎无法单独完成开始标记

---

或者我应该一次切片4并尝试渲染它吗？

您应该尝试像这样组织语法和三元运算符，以便更好地了解发生了什么：

render(){
  {items.map((item, idx) => {
    return(
      idx % 4 == 0 ? (
        <Row>
          <Col>Hello</Col>
        </Row>
      ) : (
        idx % 4 == 3 ? (
          <Row>
            <Col>Different type of hello</Col>
          </Row>
        ) : (
          null
        )
      )
    )
  })}
}

render（）{
{items.map（（item，idx）=>{
返回(
idx%4==0(
你好
) : (
idx%4==3(
不同类型的问候
) : (
无效的
)
)
)
})}
}

---

这样，您的映射会更干净，生成完全不同的行，而不是试图将所有内容嵌套在一个条件中。

您应该尝试像这样组织语法和三元运算符，以便更好地了解发生了什么：

render(){
  {items.map((item, idx) => {
    return(
      idx % 4 == 0 ? (
        <Row>
          <Col>Hello</Col>
        </Row>
      ) : (
        idx % 4 == 3 ? (
          <Row>
            <Col>Different type of hello</Col>
          </Row>
        ) : (
          null
        )
      )
    )
  })}
}

render（）{
{items.map（（item，idx）=>{
返回(
idx%4==0(
你好
) : (
idx%4==3(
不同类型的问候
) : (
无效的
)
)
)
})}
}

---

这样，您的贴图会更干净，生成完全不同的行，而不是试图将所有内容嵌套在一个条件中。

我认为您的想法是正确的。您可以使用索引检查来清理它，以有条件地渲染，而不是三元-

{items.map( (item, idx) => (
   {idx % 4 == 0 && <Row>}

     <Col key={item} lg={3}>
        ....
     <Col>

   {idx % 4 == 3 && </Row>}
}

{items.map（（item，idx）=>(
{idx%4==0&&}
....
{idx%4==3&&}
}

我认为您的想法是正确的。您可以使用索引检查来有条件地渲染，而不是三元-

{items.map( (item, idx) => (
   {idx % 4 == 0 && <Row>}

     <Col key={item} lg={3}>
        ....
     <Col>

   {idx % 4 == 3 && </Row>}
}

{items.map（（item，idx）=>(
{idx%4==0&&}
....
{idx%4==3&&}
}

您应该呈现（或返回）完整的组件，但您可以执行类似的操作来对组件进行分组，并返回由

行包装的完整组

：

    return (
      <>
        {items
          .reduce(
            (rows, key, index) =>
              (index % 3 === 0
                ? rows.push([key])
                : rows[rows.length - 1].push(key)) && rows,
            []
          )
          .map((items, idx) => (
            <Row key={idx}>
              {items.map(item => (
                <Col key={item} lg={3}>{item}</Col>
              ))}
            </Row>
          ))}
      </>
    );

---

您应该呈现（或返回）完整的组件，但您可以执行类似的操作来对组件进行分组，并返回由

行包装的完整组

：

    return (
      <>
        {items
          .reduce(
            (rows, key, index) =>
              (index % 3 === 0
                ? rows.push([key])
                : rows[rows.length - 1].push(key)) && rows,
            []
          )
          .map((items, idx) => (
            <Row key={idx}>
              {items.map(item => (
                <Col key={item} lg={3}>{item}</Col>
              ))}
            </Row>
          ))}
      </>
    );

---

您可以先创建

Col

数组，然后在第二次迭代中创建行

render（）{
const cols=items.map（（item，idx）=>）
....
);
const noRows=Math.ceil（items.length/4）；
const rows=Array.from（Array（noRows））.map（（n，i）=>(
{cols.切片（i*4，（i+1）*4）}
));
返回行；
}

您可以先创建

Col

数组，然后在第二次迭代中创建行

render（）{
const cols=items.map（（item，idx）=>）
....
);
const noRows=Math.ceil（items.length/4）；
const rows=Array.from（Array（noRows））.map（（n，i）=>(
{cols.切片（i*4，（i+1）*4）}
));
返回行；
}

是的，这样做很好它不起作用-它不喜欢只有一个标记-需要关闭，而且语法有一个错误，我请求帮助。哦，等等，我误解了你，不，你不能在不关闭的情况下呈现JSX标记them@Ryan刚刚给你们写了一个答案，若这对你们有帮助，请告诉我。也许可以尝试碎片而不是空引用是的，这样做很好它不起作用-它不喜欢只有一个标记-需要关闭而且语法有错误，我请求帮助。哦，等等，我误解了你，不，你不能在不关闭的情况下呈现JSX标记them@Ryan刚刚给你写了一个答案，如果这对你有帮助，请告诉我。也许可以试试碎片空中楼阁quotes@Ryan，很高兴你同意。在实现你想要的方面有什么进展吗？如果需要，我很乐意提供帮助。@Ryan，很高兴你同意。在实现你想要的方面有什么进展吗？如果需要，我很乐意提供帮助。谢谢！这正是我需要的-而且比reduce（）更容易阅读回答。太棒了，如果你有lodash依赖关系，那么

..range（noRows），map（）

会减少一点代码：）谢谢！这正是我需要的-而且比reduce（）答案更容易阅读。太棒了，如果你有lodash依赖关系，那么

..range（noRows），map（）

会减少一点代码：）