Bagaimana cara mengulang dan merender elemen dalam React.js tanpa array objek untuk dipetakan?

Saya mencoba untuk mengkonversi komponen jQuery ke React.js dan salah satu hal yang saya mengalami kesulitan dengan rendering n sejumlah elemen berdasarkan for for loop.

Saya mengerti ini tidak mungkin, atau direkomendasikan dan bahwa di mana ada array dalam model itu masuk akal untuk digunakan map. Tidak apa-apa, tetapi bagaimana dengan ketika Anda tidak memiliki array? Alih-alih Anda memiliki nilai numerik yang setara dengan sejumlah elemen yang diberikan untuk dirender, lalu apa yang harus Anda lakukan?

Inilah contoh saya, saya ingin awalan elemen dengan jumlah tag rentang yang sewenang-wenang berdasarkan tingkat hierarkisnya. Jadi pada level 3, saya ingin 3 tag rentang sebelum elemen teks.

Dalam javascript:

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

Saya sepertinya tidak bisa mendapatkan ini, atau apa pun yang serupa dengan bekerja di komponen JSX React.js. Alih-alih saya harus melakukan yang berikut, pertama membangun array temp dengan panjang yang benar dan kemudian mengulang 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"
    ...
  );
}

Tentunya ini bukan yang terbaik, atau satu-satunya cara untuk mencapai ini? Apa yang saya lewatkan?

Diperbarui: Pada Bereaksi> 0,16

Metode rendering tidak harus mengembalikan elemen tunggal. Array juga dapat dikembalikan.

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

ATAU

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

Documents di sini menjelaskan tentang anak-anak BEJ

TUA:

Anda bisa menggunakan satu loop sebagai gantinya

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

Anda juga dapat menggunakan .map dan fancy es6

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

Juga, Anda harus membungkus nilai pengembalian dalam wadah. Saya menggunakan div dalam contoh di atas

Seperti yang dikatakan para dokter di sini

Saat ini, dalam render komponen, Anda hanya dapat mengembalikan satu simpul; jika Anda memiliki, katakanlah, daftar div untuk dikembalikan, Anda harus membungkus komponen Anda dalam div, rentang atau komponen lainnya.

Berikut adalah contoh yang lebih fungsional dengan beberapa fitur 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;

Saya menggunakan Object.keys(chars).map(...)untuk loop dalam render

// 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()mengambil objek yang dapat diubah untuk dikonversi ke array dan fungsi peta opsional. Anda bisa membuat objek dengan .lengthproperti sebagai berikut:

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

Saya pikir ini adalah cara termudah untuk loop dalam bereaksi js

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