当我们在JSX中返回某些内容时，我们可以这样写：
<ul>
{Array.from({ length: 9 }).map((e, i) => (
<li>{i}</li>
))}
</ul>
或使用IIFE：
<ul>
{(function () {
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
return result;
})()}
</ul>
示例：https：//codesandbox.io/s/busy-aryabhata-egv27
但是是否可以编写如下内容：
<ul>
{
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
return result; // somehow "return" the array
}
</ul>
就是说，只编写没有IIFE的纯代码，并能够以某种方式返回我们创建的数组？
您可以将for循环拉到JSX之上，如下所示：
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
return (
<ul>
{result}
</ul>
)
但是，如果您想将此代码嵌入JSX内，则只能使用表达式，而不能使用语句。这就是您在第二个示例中使用IIFE的原因：它是一个表达式，因此您可以将其放入JSX中，但是它可以包含语句，因此让您有点作弊。
记住JSX被转换为一个函数调用（或一系列调用）可能会有所帮助。例如，这：
<ul>{something}</ul>
变成这个：
React.createElement("ul", null, something);
查看该函数版本，显然以下代码不是合法语法：
React.createElement(
"ul",
null,
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
return result;
)
这就是JSX也不允许您这样做的原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句