¿Cómo hacer un bucle y representar elementos en React.js sin una matriz de objetos para mapear?

Estoy tratando de convertir un componente jQuery a React.js y una de las cosas con las que tengo dificultades es representar un número n de elementos basados ​​en un bucle for.

Entiendo que esto no es posible o recomendado y que cuando existe una matriz en el modelo, tiene mucho sentido usarla map. Eso está bien, pero ¿qué pasa cuando no tienes una matriz? En cambio, tiene un valor numérico que equivale a un número dado de elementos para representar, entonces, ¿qué debe hacer?

Aquí está mi ejemplo, quiero prefijar un elemento con un número arbitrario de etiquetas de extensión según su nivel jerárquico. Entonces, en el nivel 3, quiero 3 etiquetas de extensión antes del elemento de texto.

En javascript:

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

Parece que no puedo obtener esto, o algo similar para trabajar en un componente JSX React.js. En cambio, tuve que hacer lo siguiente, primero construyendo una matriz temporal a la longitud correcta y luego haciendo un bucle de la matriz.

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

¿Seguramente esta no puede ser la mejor o la única forma de lograrlo? ¿Qué me estoy perdiendo?

Actualizado: a partir de Reaccionar> 0.16

El método de representación no necesariamente tiene que devolver un solo elemento. También se puede devolver una matriz.

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

O

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

Documentos aquí explicando sobre niños JSX

ANTIGUO:

Puedes usar un bucle en su lugar

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

También puedes usar .map y fancy es6

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

Además, debe envolver el valor de retorno en un contenedor. Usé div en el ejemplo anterior

Como dicen los documentos aquí

Actualmente, en el renderizado de un componente, solo puede devolver un nodo; si tiene, digamos, una lista de divs para devolver, debe envolver sus componentes dentro de un div, span o cualquier otro componente.

Aquí hay un ejemplo más funcional con algunas características de 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;

Estoy usando Object.keys(chars).map(...)para hacer un bucle en 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()toma un objeto iterable para convertirlo en una matriz y una función de mapa opcional. Puede crear un objeto con una .lengthpropiedad de la siguiente manera:

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

Creo que esta es la forma más fácil de bucle en reaccionar js

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