Estou tentando converter um componente jQuery para React.js e uma das coisas com as quais estou tendo dificuldade é renderizar n número de elementos com base em um loop for.
Entendo que isso não é possível ou recomendado e que, onde existe uma matriz no modelo, faz todo o sentido usar map
. Tudo bem, mas e quando você não tem uma matriz? Em vez disso, você tem um valor numérico que equivale a um determinado número de elementos para renderizar, então o que você deve fazer?
Aqui está o meu exemplo, quero prefixar um elemento com um número arbitrário de tags de extensão com base em seu nível hierárquico. Portanto, no nível 3, quero três tags de span antes do elemento de texto.
Em javascript:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
Não consigo entender isso, ou algo semelhante ao trabalho em um componente JSX React.js. Em vez disso, tive que fazer o seguinte, primeiro construindo uma matriz temporária com o comprimento correto e depois fazendo um loop na matriz.
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"
...
);
}
Certamente isso não pode ser o melhor, ou a única maneira de conseguir isso? o que estou perdendo?