Come eseguire loop e rendere elementi in React.js senza una serie di oggetti da mappare?

Sto provando a convertire un componente jQuery a React.js e una delle cose che ho difficoltà è rendere n numero di elementi basati su un for loop.

Capisco che questo non sia ansible o che sia raccomandato e che quando esiste un arrays nel model, ha senso per utilizzare la map . Va bene, ma cosa succede quando non hai una matrix? Invece hai un valore numbersco che equivale a un dato numero di elementi da rendere, quindi cosa dovresti fare?

Ecco il mio esempio, voglio prefisso di un elemento con un numero arbitrario di variables di spanatura in base al suo livello gerarchico. Quindi al livello 3, voglio 3 span tag prima dell'elemento di text.

In javascript:

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

Non riesco a trovare questo, o qualcosa di simile al lavoro in un componente JSX React.js. Invece ho dovuto fare quanto segue, innanzitutto build una matrix temp alla lunghezza corretto e poi looping l'arrays.

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

Sicuramente questo non può essere il migliore, o solo modo per raggiungere questo objective? Che cosa mi manca?

È ansible utilizzare invece un ciclo

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

È anche ansible utilizzare .map e fantasia es6

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

Inoltre, è necessario avvolgere il valore restituito in un contenitore. Ho usato div nell'esempio precedente

Come dicono i docenti qui

Attualmente, nel rendering di un componente, è ansible restituire un solo nodo; se si dispone, ad esempio, di un elenco di div per tornare, è necessario avvolgere i componenti all'interno di un div, span o qualsiasi altro componente.

Ecco un esempio più funzionale con alcune funzioni 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; 

Sto utilizzando Object.keys(chars).map(...) per loop nel rendering

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

Ecco una syntax alternativa

Mi ritrovo utilizzando questo frammento molto con elementi di elenco, jsx e frecce grasse:

 return ( { obj && <ul className={styles.obj}> { Object.keys(obj).map((k, index) => <li key={index}>{ `${k}: ${obj[k]}` }</li>) } </ul> } )