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循环不会返回任何内容，但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()}

Answer 2

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

此外，您在for循环中尝试的内容不是有效的JavaScript。

Answer 3

for循环不会返回任何值。 for循环只需为数组中的每个项执行。

另一方面，map会返回一个新数组的React元素。

例如：

function giveMeAnArrayPlease() {
  // Doesn't do anything, just loops through the array
  var array = ['Hey', 'Hi', 'What's up'];
  for (var i = 0; i < array.length; i++) {
    array[i];
  }
}

VS

function giveMeAnArrayPlease() {
  // Returns a nice uppercase array
  var array = ['Hey', 'Hi', 'What's up'];
  return array.map(word => word.toUpperCase());
}

Map 返回一个新数组，其中所有单词都是大写的。 React可以采用一系列元素并将其转换为元素，例如在示例中，但它不能采用未定义的元素。把它变成一个元素。

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

3 个答案: