为什么在React中不允许使用循环 - JSX？

Question

我试图理解为什么不允许这段代码:

<tbody>{
for (var i=0; i < objects.length; i++) {
    <ObjectRow obj={objects[i]} key={i}>
} }

为什么允许这个:

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody

我没有得到它...感谢您的帮助!

Answer 1

在 JSX 中，您必须将表达式（生成值）传递到花括号中。然而 for 循环是一个语句（执行一个操作）。

此外，您在 for-loop 中尝试的内容不是有效的 javascript。

Answer 2

这是因为JSX期望其中的任何内容返回要显示的对象.for循环不会返回任何内容,但map会返回.

如果你有这样的东西,你可以做一个for循环

const getObjects = () => {
  const objs = []
  for (var i=0; i < objects.length; i++) {
    objs.push(<ObjectRow obj={objects[i]} key={i}>)
  }

  return objs;
}

<tbody>{getObjects()}