Làm cách nào để lặp và kết xuất các phần tử trong React.js mà không cần một mảng các đối tượng để ánh xạ?

Tôi đang cố gắng chuyển đổi một thành phần jQuery thành React.js và một trong những điều tôi gặp khó khăn là hiển thị n số phần tử dựa trên vòng lặp for.

Tôi hiểu điều này là không thể, hoặc được khuyến nghị và khi một mảng tồn tại trong mô hình thì nó hoàn toàn có ý nghĩa để sử dụng map. Điều đó tốt, nhưng khi bạn không có một mảng thì sao? Thay vào đó, bạn có giá trị số tương đương với một số phần tử nhất định để hiển thị, vậy bạn nên làm gì?

Dưới đây là ví dụ của tôi, tôi muốn tiền tố một phần tử với số lượng thẻ nhịp tùy ý dựa trên mức phân cấp của nó. Vì vậy, ở cấp 3, tôi muốn 3 thẻ span trước phần tử văn bản.

Trong javascript:

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

Tôi dường như không thể có được điều này, hoặc bất cứ điều gì tương tự để hoạt động trong thành phần JSX React.js. Thay vào đó tôi phải làm như sau, đầu tiên xây dựng một mảng tạm thời với độ dài chính xác và sau đó lặp lại mảng đó.

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"
    ...
  );
}

Chắc chắn đây không phải là cách tốt nhất, hay là cách duy nhất để đạt được điều này? Tôi đang thiếu gì?

Đã cập nhật: Kể từ khi Phản ứng> 0,16

Phương thức kết xuất không nhất thiết phải trả về một phần tử. Một mảng cũng có thể được trả về.

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

HOẶC LÀ

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

Tài liệu ở đây giải thích về trẻ em JSX

CŨ:

Bạn có thể sử dụng một vòng lặp thay thế

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

Bạn cũng có thể sử dụng .map và es6 ưa thích

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

Ngoài ra, bạn phải bọc giá trị trả lại trong một container. Tôi đã sử dụng div trong ví dụ trên

Như các tài liệu nói ở đây

Hiện tại, trong kết xuất của một thành phần, bạn chỉ có thể trả về một nút; nếu bạn có một danh sách các div sẽ trả về, bạn phải bọc các thành phần của mình trong một div, span hoặc bất kỳ thành phần nào khác.

Dưới đây là ví dụ chức năng hơn với một số tính năng ES6:

'use strict';

const React = require('react');

function renderArticles(articles) {
    if (articles.length > 0) {      
        return articles.map((article, index) => (
            <Article key={index} article={article} />
        ));
    }
    else return [];
}

const Article = ({article}) => {
    return ( 
        <article key={article.id}>
            <a href={article.link}>{article.title}</a>
            <p>{article.description}</p>
        </article>
    );
};

const Articles = React.createClass({
    render() {
        const articles = renderArticles(this.props.articles);

        return (
            <section>
                { articles }
            </section>
        );
    }
});

module.exports = Articles;

Tôi đang sử dụng Object.keys(chars).map(...)để lặp trong kết xuất

// chars = {a:true, b:false, ..., z:false}

render() {
    return (
       <div>
        {chars && Object.keys(chars).map(function(char, idx) {
            return <span key={idx}>{char}</span>;
        }.bind(this))}
        "Some text value"
       </div>
    );
}

Array.from()mất một đối tượng lặp để chuyển đổi thành một mảng và một chức năng bản đồ tùy chọn. Bạn có thể tạo một đối tượng với một thuộc .lengthtính như sau:

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

Tôi nghĩ rằng đây là cách dễ nhất để lặp lại trong phản ứng js

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>