Wie kann man Elemente in React.js schleifen und rendern, ohne dass ein Array von Objekten zugeordnet werden muss?

Ich versuche, eine jQuery-Komponente in React.js zu konvertieren, und eines der Dinge, mit denen ich Schwierigkeiten habe, ist das Rendern von n Elementen basierend auf einer for-Schleife.

Ich verstehe, dass dies nicht möglich oder empfohlen ist und dass die Verwendung eines Arrays im Modell durchaus sinnvoll ist map. Das ist in Ordnung, aber was ist, wenn Sie kein Array haben? Stattdessen haben Sie einen numerischen Wert, der einer bestimmten Anzahl von zu rendernden Elementen entspricht. Was sollten Sie dann tun?

Hier ist mein Beispiel: Ich möchte einem Element eine beliebige Anzahl von Span-Tags voranstellen, basierend auf seiner Hierarchieebene. Auf Ebene 3 möchte ich also 3 Span-Tags vor dem Textelement.

In Javascript:

for (var i = 0; i < level; i++) {
    $el.append('<span class="indent"></span>');
}
$el.append('Some text value');

Ich kann das oder etwas Ähnliches nicht verstehen, um in einer JSX React.js-Komponente zu arbeiten. Stattdessen musste ich Folgendes tun, zuerst ein temporäres Array mit der richtigen Länge erstellen und dann das Array in einer Schleife durchlaufen.

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"
    ...
  );
}

Sicherlich kann dies nicht der beste oder einzige Weg sein, dies zu erreichen? Was vermisse ich?

Aktualisiert: Ab React> 0.16

Die Rendermethode muss nicht unbedingt ein einzelnes Element zurückgeben. Ein Array kann auch zurückgegeben werden.

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

ODER

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

Hier finden Sie Informationen zu JSX-Kindern

ALT:

Sie können stattdessen eine Schleife verwenden

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

Sie können auch .map und ausgefallene es6 verwenden

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

Außerdem müssen Sie den Rückgabewert in einen Container einschließen. Ich habe im obigen Beispiel div verwendet

Wie die Dokumente hier sagen

Derzeit können Sie beim Rendern einer Komponente nur einen Knoten zurückgeben. Wenn Sie beispielsweise eine Liste von Divs haben, die zurückgegeben werden sollen, müssen Sie Ihre Komponenten in Div, Span oder eine andere Komponente einschließen.

Hier ist ein funktionaleres Beispiel mit einigen ES6-Funktionen:

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

Ich benutze, Object.keys(chars).map(...)um in Render zu schleifen

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

Array.from()Nimmt ein iterierbares Objekt zum Konvertieren in ein Array und eine optionale Zuordnungsfunktion. Sie können ein Objekt mit einer .lengthEigenschaft wie folgt erstellen :

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

Ich denke, dies ist der einfachste Weg, um js zu reagieren

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