Comment boucler et rendre des éléments dans React.js sans un tableau d'objets à mapper?

J'essaie de convertir un composant jQuery en React.js et l'une des choses avec lesquelles j'ai du mal est de rendre n nombre d'éléments basés sur une boucle for.

Je comprends que ce n'est pas possible ou recommandé et que lorsqu'un tableau existe dans le modèle, il est parfaitement logique de l'utiliser map. C'est bien, mais qu'en est-il lorsque vous n'avez pas de tableau? Au lieu de cela, vous avez une valeur numérique qui équivaut à un nombre donné d'éléments à rendre, alors que devez-vous faire?

Voici mon exemple, je veux préfixer un élément avec un nombre arbitraire de balises span en fonction de son niveau hiérarchique. Donc au niveau 3, je veux 3 balises span avant l'élément de texte.

En javascript:

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

Je n'arrive pas à comprendre cela, ou quelque chose de similaire pour travailler dans un composant JSX React.js. Au lieu de cela, j'ai dû faire ce qui suit, en construisant d'abord un tableau temporaire à la longueur correcte, puis en bouclant le tableau.

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

Cela ne peut certainement pas être le meilleur ou le seul moyen d'y parvenir? Qu'est-ce que je rate?

Mise à jour: à partir de React> 0,16

La méthode de rendu ne doit pas nécessairement renvoyer un seul élément. Un tableau peut également être renvoyé.

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

OU

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

Docs ici expliquant les enfants JSX

VIEUX:

Vous pouvez utiliser une boucle à la place

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

Vous pouvez également utiliser .map et fancy es6

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

En outre, vous devez envelopper la valeur de retour dans un conteneur. J'ai utilisé div dans l'exemple ci-dessus

Comme le disent les documents ici

Actuellement, dans le rendu d'un composant, vous ne pouvez renvoyer qu'un seul nœud; si vous avez, par exemple, une liste de div à renvoyer, vous devez envelopper vos composants dans un div, un span ou tout autre composant.

Voici un exemple plus fonctionnel avec quelques fonctionnalités 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;

J'utilise Object.keys(chars).map(...)pour faire une boucle dans le rendu

// 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()prend un objet itérable à convertir en un tableau et une fonction de carte facultative. Vous pouvez créer un objet avec une .lengthpropriété comme suit:

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

Je pense que c'est le moyen le plus simple de faire une boucle dans react js

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