Reactjs循环和在循环中添加条件元素

Question

如何处理reactjsx中循环中的条件，我想创建一个<div>，并每隔一段时间关闭</div>，以便创建行

现在我有这样的东西：

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;
}

因此，如果乘积为null，代码将呈现5个<Content />。这都在一排。

我正在努力实现的是拥有这样的东西：

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

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

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

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

Answer 1

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

const content = [];
let buffer = [];
for (let i = 0; i < sizeLength; i++) {
buffer.push(
<Fragment key={`${i}`}>
<Content />
<Space width="10px" />
</Fragment>,
);
if (i % 5) {
content.push(<div>{buffer}</div>);
buffer = [];
}
}
// one last push if there are left over items
if (buffer.length > 0) content.push(<div>{buffer}</div>);
return content;

Answer 2

在React JSX中，不能有像<div>或</div>这样的独立标签。标签定义React元素，并且必须始终是自封闭的，或者成对出现，中间有0个或多个元素。例如：

// OK - self closing tag. Creates a React div element with no children
const a = <div />;
// OK - Same as above
const b = <div></div>;
// OK - Creates div element with one child, a br element
const c = <div>
<br />
</div>;
// OK - Creates a div element and executes JS in the braces
// to create two img children
const d = <div>{
[<img />, <img />]
}</div>;
// Not OK - Everything between the div tags is treated as text (i.e. `; const e = `)
const d = <div>;
const e = </div>;

正如你在代码中看到的，你正在将独立的标签推送到你的数组中，这是不好的。相反，使用嵌套的循环并嵌套元素数组：

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;

使用索引作为元素键通常是个坏主意，所以更喜欢使用产品对象上的ID，例如key={product[i+j].id}