Estoy tratando de convertir un componente jQuery a React.js y una de las cosas con las que tengo dificultades es representar una cantidad de elementos basados en un bucle for.
Entiendo que esto no es posible o recomendado y que donde existe una matriz en el modelo, tiene mucho sentido usar map . Eso está bien, pero ¿qué pasa cuando no tienes una matriz? En su lugar, tiene un valor numérico que equivale a una cantidad determinada de elementos para representar, entonces, ¿qué debe hacer?
Aquí está mi ejemplo, quiero prefijar un elemento con un número arbitrario de etiquetas de intervalo en función de su nivel jerárquico. Entonces, en el nivel 3, quiero 3 etiquetas de intervalo 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, ni nada similar para trabajar en un componente JSX React.js. En cambio, tuve que hacer lo siguiente, primero construir una matriz temporal con la longitud correcta y luego hacer un bucle en la matriz.
Reaccionar.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 React> 0.16
El método Render 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í que explican sobre los 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 devuelto 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, lapso 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;Array.from() toma un objeto iterable para convertirlo en una matriz y una función de mapa opcional. Podría crear un objeto con una propiedad .length de la siguiente manera:
return Array.from({length: this.props.level}, (item, index) => <span className="indent" key={index}></span> );