Javascript Reactjs循环并在循环中添加条件元素

如何在reactjsx中处理循环中的条件，我想创建一个

，并每隔一段时间关闭

，以便创建行

现在我有这样的事情：

renderContent = () => {
  const { classes, product } = this.props;

  if (!product) {
    return (
      <>
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
      </>
    );
  }

  const sizeLength = product.length;
  const content = [];

  for (let i = 0; i < sizeLength; i++) {
    if (i === 0 || i % 5) content.push(<div>)

    content.push(
      <Fragment key={`${i}`}>
        <Content />
        <Space width="10px" />
      </Fragment>,
    );

    if (i === 4 || i % 4 ) content.push(</div>)
  }
  return content;
}

<div>
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
</div>

<div>
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
</div>
<div>
  <Content />
</div>

renderContent=（）=>{
const{classes，product}=this.props；
如果（！产品）{
返回(
);
}
const sizeLength=产品长度；
常量内容=[]；
for（设i=0；i

因此，如果product为null，代码将呈现5。这是一排

我想实现的是这样的目标：

renderContent = () => {
  const { classes, product } = this.props;

  if (!product) {
    return (
      <>
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
      </>
    );
  }

  const sizeLength = product.length;
  const content = [];

  for (let i = 0; i < sizeLength; i++) {
    if (i === 0 || i % 5) content.push(<div>)

    content.push(
      <Fragment key={`${i}`}>
        <Content />
        <Space width="10px" />
      </Fragment>,
    );

    if (i === 4 || i % 4 ) content.push(</div>)
  }
  return content;
}

<div>
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
</div>

<div>
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
</div>
<div>
  <Content />
</div>

每5圈绕一圈，所以如果有第6圈，应该是这样的：

renderContent = () => {
  const { classes, product } = this.props;

  if (!product) {
    return (
      <>
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
        <Space width="10px" />
        <Content />
      </>
    );
  }

  const sizeLength = product.length;
  const content = [];

  for (let i = 0; i < sizeLength; i++) {
    if (i === 0 || i % 5) content.push(<div>)

    content.push(
      <Fragment key={`${i}`}>
        <Content />
        <Space width="10px" />
      </Fragment>,
    );

    if (i === 4 || i % 4 ) content.push(</div>)
  }
  return content;
}

<div>
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
</div>

<div>
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
  <Space width="10px" />
  <Content />
</div>
<div>
  <Content />
</div>

---

但是我的密码坏了，不起作用。有什么我遗漏的吗？我不确定content.push是否正确，也许有更好的方法来处理这个问题？

将项目放入缓冲区数组，然后每隔5个项目将它们刷新到一个div中，并将该div添加到渲染数组中

const content=[]；
让缓冲区=[]；
for（设i=0；i0）content.push（{buffer}）；
返回内容；

将项目放入缓冲区数组，然后每隔5个项目将其刷新到一个div中，并将该div添加到渲染数组中

const content=[]；
让缓冲区=[]；
for（设i=0；i0）content.push（{buffer}）；
返回内容；

在React JSX中，不能有像

或

这样的独立标记。标记定义React元素，并且必须始终是自动关闭的或成对出现，中间有0个或多个元素。例如：

//确定-自动关闭标记。创建一个没有子元素的React div元素
常数a=；
//好的-同上
常数b=；
//确定-创建具有一个子元素的div元素，即br元素
常数c=


;
//确定-创建一个div元素并在大括号中执行JS
//创建两个img子项
常数d={
[, ]
};
//不正常-div标记之间的所有内容都被视为文本（即`const e=`）
常数d=；
常数e=；

正如您在代码中看到的，您正在将独立标记推入数组，这是不正常的。相反，请使用嵌套循环并嵌套元素数组：

const content = [];
const productLength = product.length || 5;

for (let i = 0; i < productLength; i += 5) {
  const innerContent = [];
  const innerLength = Math.min(5, (productLength - i));
  for (let j = 0; j < innerLength; j++) {
    innerContent.push(
      <Fragment key={i+j}>
        <Content />        
        {
          // Don't render the last space. React ignores null children
          j !== innerLength - 1 ? <Space width="10px" /> : null
        }
      </Fragment>
    );
  }

  content.push(<div>{innerContent}</div>);
}

return content;

const content=[]；
const productLength=product.length | | 5；
for（设i=0；i

---

通常使用索引作为元素键，因此更喜欢使用产品对象上的ID，例如，

key={product[i+j].ID}

在React JSX中，不能有像

或

这样的独立标记。标记定义React元素，并且必须始终是自动关闭的或成对出现，中间有0个或多个元素。例如：

//确定-自动关闭标记。创建一个没有子元素的React div元素
常数a=；
//好的-同上
常数b=；
//确定-创建具有一个子元素的div元素，即br元素
常数c=


;
//确定-创建一个div元素并在大括号中执行JS
//创建两个img子项
常数d={
[, ]
};
//不正常-div标记之间的所有内容都被视为文本（即`const e=`）
常数d=；
常数e=；

正如您在代码中看到的，您正在将独立标记推入数组，这是不正常的。相反，请使用嵌套循环并嵌套元素数组：

const content = [];
const productLength = product.length || 5;

for (let i = 0; i < productLength; i += 5) {
  const innerContent = [];
  const innerLength = Math.min(5, (productLength - i));
  for (let j = 0; j < innerLength; j++) {
    innerContent.push(
      <Fragment key={i+j}>
        <Content />        
        {
          // Don't render the last space. React ignores null children
          j !== innerLength - 1 ? <Space width="10px" /> : null
        }
      </Fragment>
    );
  }

  content.push(<div>{innerContent}</div>);
}

return content;

const content=[]；
const productLength=product.length | | 5；
for（设i=0；i

---

通常使用索引作为元素键，因此更喜欢使用产品对象上的ID，例如

key={product[i+j].ID}

我将批准这个答案。我感谢你的帮助。这并没有给我我想要的结果，但它确实给了我该怎么做的方向，谢谢@hellomello好的，如果你找到一个解决方案，把答案贴出来，接受它，让人们知道如何去做你真正想做的事情，我会批准这个答案。我感谢你的帮助。这并没有给我我想要的结果，但它确实给了我该怎么做的方向，谢谢@hellomello好的，如果你找到了一个解决方案，把答案贴出来并接受它，这样人们就会知道如何去做你真正想做的事情