Estoy usando React / JSX en mi aplicación para lograr lo que quiero, también, Lodash.
Necesito repetir un elemento una cierta cantidad de veces dependiendo de una condición, ¿cómo debo hacer eso?
Aquí está el elemento:
<span className="busterCards">♦</span>;
Y lo estoy asignando así:
let card;
if (data.hand === '8 or more cards') {
card = <span className="busterCards">♦</span>;
}
Entonces, en este caso, necesito repetir el elemento 8 veces. ¿Cuál debería ser el proceso con Lodash?
5 respuestas
Aquí tiene:
let card = [];
_.times(8, () => {
card.push(<span className="busterCards">♦</span>);
});
Es posible que desee agregar la clave a cada elemento span
para que React no se queje de la falta del atributo clave:
let card = [];
_.times(8, (i) => {
card.push(<span className="busterCards" key={i}>♦</span>);
});
Para obtener más información acerca de .times
, consulte aquí: https://lodash.com/docs#times
Utilizando _.times
: https://jsfiddle.net/v1baqwxv/
var Cards = React.createClass({
render() {
return <div>cards {
_.times( this.props.count, () => <span>♦</span> )
}</div>;
}
});
La forma más corta de hacer esto sin bibliotecas externas :
const n = 8; // Or something else
[...Array(n)].map((e, i) => <span className="busterCards" key={i}>♦</span>)
Podrías hacerlo así (sin lodash):
var numberOfCards = 8; // or more.
if (data.hand >= numberOfCards) {
var cards = [];
for (var i = 0; i < numberOfCards; i++) {
cards[i] = (<span className="busterCards">♦</span>);
}
}
Solución sin lodash o sintaxis ES6 spread:
Array.apply(null, { length: 10 }).map((e, i) => (
<span className="busterCards" key={i}>
♦
</span>
));
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.