如何在 React JSX 代码中使用 For 循环

Question

我正在尝试使用 For Loop 在 React JSX 代码中获取数据。

const count = 10

return (
    <>
        {for(let i = 0; i < count; i++) {
            return (
                <div>
                    <h1>{i}</h1>
                </div>
            )
        }}
    </>
)

我知道我可以在 JSX 中使用 map function 而不使用 for 循环。 但我想用一个 for 循环来解决这个问题。 我认为我们可以使用 for 循环来让它工作，我希望这里的任何人都可以帮助我。

Answer 1

插入 JSX 时，您需要返回 JSX，或者让表达式计算为一个数组，其中数组的每个元素都是 JSX。

要使for循环正常工作，您必须推送到一个数组，然后在最后返回该数组。

如果你想在插入的 JSX 中完成这一切：

return (
    <>
        {(() => {
            const arr = [];
            for (let i = 0; i < count; i++) {
                arr.push(
                    <div>
                        <h1>{i}</h1>
                    </div>
                );
            }
            return arr;
        })()}
    </>
)

但更易读的方法是返回数组本身，而不将其放入片段中：

const count = 10;
const arr = [];
for (let i = 0; i < count; i++) {
    arr.push(
        <div>
            <h1>{i}</h1>
        </div>
    );
}
return arr;

但是这种情况的for循环很奇怪。 功能性Array.from更好。

return Array.from(
    { length: 10 },
    (_, i) => (
        <div>
            <h1>{i}</h1>
        </div>
    )
);