javascript - 如何在没有要映射的对象数组的情况下循环和渲染React.js中的元素？(How to loop and render elements in React.js without an array of objects to map?)

Question

I'm trying to convert a jQuery component to React.js and one of the things I'm having difficulty with is rendering n number of elements based on a for loop.

(我正在尝试将jQuery组件转换为React.js，而我遇到的一个问题是基于for循环渲染n个元素。)

I understand this is not possible, or recommended and that where an array exists in the model it makes complete sense to use map .

(我理解这是不可能的，或者推荐并且如果模型中存在数组，那么使用map就完全有意义了。)

That's fine, but what about when you do not have an array?

(那很好，但是当你没有阵列时呢？)

Instead you have numeric value which equates to a given number of elements to render, then what should you do?

(相反，你有数值等于要渲染的给定数量的元素，那么你应该怎么做？)

Here's my example, I want to prefix a element with an arbitrary number of span tags based on it's hierarchical level.

(这是我的例子，我想根据它的层次级别为一个元素添加任意数量的span标记。)

So at level 3, I want 3 span tags before the text element.

(所以在第3级，我想在文本元素之前使用3个span标签。)

In javascript:

(在javascript中：)

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

I can't seem to get this, or anything similar to work in a JSX React.js component.

(我似乎无法得到这个，或类似的东西在JSX React.js组件中工作。)

Instead I had to do the following, first building a temp array to the correct length and then looping the array.

(相反，我必须执行以下操作，首先将temp数组构建为正确的长度然后循环数组。)

React.js

(React.js)

render: function() {
  var tmp = [];
  for (var i = 0; i < this.props.level; i++) {
    tmp.push(i);
  }
  var indents = tmp.map(function (i) {
    return (
      <span className='indent'></span>
    );
  });

  return (
    ...
    {indents}
    "Some text value"
    ...
  );
}

Surely this can't be the best, or only way to achieve this?

(当然，这不是最好的，或唯一的方法来实现这一目标？)

What am I missing?

(我错过了什么？)

  ask by Jonathan Miles translate from so

Answer 1

Updated: As of React > 0.16

(更新：自React> 0.16起)

Render method does not necessarily have to return a single element.

(Render方法不一定必须返回单个元素。)

An array can also be returned.

(也可以返回一个数组。)

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return indents;

OR

(要么)

return this.props.level.map((item, index) => (
    <span className="indent" key={index}>
        {index}
    </span>
));

Docs here explaining about JSX children

(这里的文档解释了JSX儿童)

---

OLD:

(旧：)

You can use one loop instead

(您可以使用一个循环代替)

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.push(<span className='indent' key={i}></span>);
}
return (
   <div>
    {indents}
    "Some text value"
   </div>
);

You can also use .map and fancy es6

(你也可以使用.map和fancy es6)

return (
   <div>
    {this.props.level.map((item, index) => (
       <span className='indent' key={index} />
    ))}
    "Some text value"
   </div>
);

Also, you have to wrap the return value in a container.

(此外，您必须将返回值包装在容器中。)

I used div in the above example

(我在上面的例子中使用了div)

As the docs say here

(正如文档在这里所说的那样)

Currently, in a component's render, you can only return one node;

(目前，在组件的渲染中，您只能返回一个节点;)

if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.

(如果你有一个要返回的div列表，你必须将你的组件包装在div，span或任何其他组件中。)