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

问题描述

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

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.

我知道这是不可能的，或者推荐，如果模型中存在一个数组，那么使用 map 。那很好，但是当你没有阵列时呢？相反，你有数值等于要渲染的给定数量的元素，那么你应该怎么做？

I understand this is not possible, or recommended and that where an array exists in the model it makes complete sense to use 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?

这是我的例子，我想要一个任意的元素前缀跨度标签的数量基于它的层次级别。所以在第3级，我想在文本元素之前使用3个span标签。

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

在javascript中：

In javascript:

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

我似乎无法得到这个，或类似于JSX React.js组件中的任何工作。相反，我必须执行以下操作，首先将temp数组构建为正确的长度然后循环数组。

I can't seem to get this, or anything similar to work in a JSX React.js component. Instead I had to do the following, first building a temp array to the correct length and then looping the array.

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?

推荐答案

更新时间：自React> 0.16

渲染方法不一定要返回单个元素。也可以返回一个数组。

Render method does not necessarily have to return a single element. 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>
));

这里的文档解释有关JSX儿童的信息

OLD：

您可以使用一个循环

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>
);

您还可以使用 .map 和花式es6

You can also use .map and fancy es6

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

此外，您必须将返回值包装在容器中。我在上面的例子中使用了div

Also, you have to wrap the return value in a container. I used div in the above example

正如文档所说这里

目前，在组件的渲染中，你只能返回一个节点;如果你有一个要返回的div列表，你必须将你的组件包装在div，span或任何其他组件中。

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.

这篇关于如何在没有要映射的对象数组的情况下循环和渲染React.js中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！