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?