Eşlenecek nesneler dizisi olmadan React.js'de öğeler nasıl döngülenir ve oluşturulur?

Bir jQuery bileşenini React.js'ye dönüştürmeye çalışıyorum ve zorluk yaşadığım şeylerden biri, for döngüsüne dayalı n sayıda öğeyi oluşturmaktır.

Bunun mümkün olmadığını veya tavsiye edilmediğini ve modelde bir dizi bulunduğunda kullanılmasının tamamen mantıklı olduğunu anlıyorum map. Sorun değil, ama bir diziniz olmadığında ne olacak? Bunun yerine, işlenecek belirli sayıda öğeye eşit olan sayısal bir değere sahipsiniz, o zaman ne yapmalısınız?

Örneğim burada, hiyerarşik düzeyine bağlı olarak rastgele sayıda span etiketi içeren bir öğenin önüne eklemek istiyorum. Yani 3. seviyede, metin öğesinden önce 3 yayılma etiketi istiyorum.

JavaScript'te:

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

Bunu veya bir JSX React.js bileşeninde çalışmaya benzer bir şey alamıyorum. Bunun yerine, önce doğru uzunlukta bir geçici dizi oluşturup ardından diziyi döngüye alarak aşağıdakileri yapmak zorunda kaldım.

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

Şüphesiz bu, bunu başarmanın en iyi yolu veya tek yolu olamaz? Neyi kaçırıyorum?

Güncelleme: React itibariyle> 0.16

Oluşturma yönteminin tek bir öğe döndürmesi gerekmez. Bir dizi de döndürülebilir.

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

VEYA

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

JSX alt öğelerini açıklayan dokümanlar

ESKİ:

Bunun yerine bir döngü kullanabilirsiniz

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

Ayrıca kullanabilirsiniz .map ve fantezi ES6

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

Ayrıca, dönüş değerini bir kapta sarmalısınız. Yukarıdaki örnekte div kullandım

Doktorların burada söylediği gibi

Şu anda, bir bileşenin işlemesinde yalnızca bir düğüm döndürebilirsiniz; Örneğin, döndürülecek bir div listeniz varsa, bileşenlerinizi bir div, span veya başka bir bileşenin içine sarmalısınız.

İşte bazı ES6 özellikleriyle daha işlevsel bir örnek:

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

Ben kullanıyorum Object.keys(chars).map(...)işlemek döngü

// 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()bir diziye ve isteğe bağlı bir eşleme işlevine dönüştürmek için yinelenebilir bir nesne alır. .lengthAşağıdaki gibi bir özelliğe sahip bir nesne oluşturabilirsiniz :

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

Bence bu, react js'de döngü oluşturmanın en kolay yolu

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