在使用ReactJS和JSX时，我们是否可以编写简单的JS代码，以某种方式返回一些元素？
当我们在JSX中返回一些东西时，我们可以写：
<ul>
{Array.from({ length: 9 }).map((e, i) => (
<li>{i}</li>
))}
</ul>或者用生命：
<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>也就是说，只需编写没有生命的普通代码，并且能够以某种方式返回我们创建的数组？
回答 3
Stack Overflow用户
发布于 2021-02-19 04:51:26
您可以将for循环向上拉到JSX之上，如下所示：
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
return (
<ul>
{result}
</ul>
)但是，如果要将此代码嵌入到JSX中，则只能使用表达式，而不能使用语句。这就是第二个例子中生命的原因:它是一个表达式，所以你可以把它放在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也不让你这么做。
Stack Overflow用户
发布于 2021-02-19 04:51:38
正如您已经注意到的，JSX支持任意的JavaScript。强调词语的表达。生命之所以有效，是因为它是一个定义表达式和调用表达式的函数。对后一个示例没有支持，因为JSX没有支持块而不是表达式的机制，而且JavaScript除了通过IIFE之外，也没有将块作为表达式处理的机制。
但是，有一个关于表达的第1阶段建议，如果我理解正确，它将允许您这样做：
<ul>
{
do {
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
result;
}
}
</ul>它是一个第一阶段提案，所以它还没有在标准中，并且可能成为标准，也可能不成为标准。幸运的是，它有一个Babel插件，您可能有兴趣试用它：@babel/plugin-proposal-do-expressions
Stack Overflow用户
发布于 2021-02-19 04:58:41
不像写的那样。JSX只允许表达式，即返回值的代码。您可以在返回其他代码的代码中编写“不返回”代码；例如，您可以在map中分配map的代码。因此，如果您真的想编写上面的内容，可以将其包装在一个map中。
<ul>
{
[0].map(() => {
const result = [];
for (let i = 0; i < 9; i++) {
result.push(<li>{i}</li>);
}
return result;
});
}
</ul>对我来说，这就像是一个思想实验，而不是对最佳实践的要求。在我看来，这将是在JSX之外构建一系列值，并在其中映射它。
const YourComponent = () => {
...
const numbers = Array.from({ length: 9 });
return(
<ul>
{ numbers.map((_, i) => <li>{i}</li>) }
</ul>
);https://stackoverflow.com/questions/66271856
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号