web-dev-qa-db-fra.com

Comment boucler et rendre des éléments dans React.js sans un tableau d'objets à mapper?

J'essaie de convertir un composant jQuery en React.js et l'un des problèmes qui me posent problème est le rendu de n éléments sur la base d'une boucle for.

Je comprends que ce n’est ni possible ni recommandé et que, s’il existe un tableau dans le modèle, il est parfaitement logique d’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 correspond à un nombre donné d’éléments à rendre, que devez-vous faire?

Voici mon exemple, je souhaite 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 à obtenir ceci, ou quelque chose de similaire à fonctionner dans un composant JSX React.js. Au lieu de cela, je devais 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"
    ...
  );
}

Ce ne peut sûrement pas être le meilleur, ou le seul moyen d'y parvenir? Qu'est-ce que je rate?

javascriptjqueryreactjsreact-jsx
132
Jonathan Miles

Mise à jour: à partir de React> 0.16

La méthode de rendu ne doit pas nécessairement renvoyer un seul élément. Un tableau peut également être retourné.

var indents = [];
for (var i = 0; i < this.props.level; i++) {
  indents.Push(<span className='indent' key={i}></span>);
}
return indents;

OR

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

Docs expliquant ici à propos des enfants JSX

ANCIEN:

Vous pouvez utiliser une boucle à la place

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

Vous pouvez également utiliser . Map et fantaisie es6

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

En outre, vous devez envelopper la valeur de retour dans un conteneur. J'ai utilisé div dans l'exemple ci-dessus

Comme le dit la documentation ici

Actuellement, dans le rendu d'un composant, vous ne pouvez renvoyer qu'un seul nœud; Si vous avez, par exemple, une liste de divs à renvoyer, vous devez envelopper vos composants dans un div, un span ou tout autre composant.

229
Dhiraj

Voici un exemple plus fonctionnel avec certaines fonctionnalités de l'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;
48
Dmytro Medvid

J'utilise Object.keys(chars).map(...) pour boucler le rendu

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

Array.from() prend un objet itérable à convertir en tableau et en fonction optionnelle. Vous pouvez créer un objet avec une propriété .length comme suit:

return Array.from({length: this.props.level}, (item, index) => 
  <span className="indent" key={index}></span>
);
10
conradj

Je pense que c'est le moyen le plus simple de faire une boucle en réaction js

<ul>
    {yourarray.map((item)=><li>{item}</li>)}
</ul>
0
Nasar uddin