Ich versuche, eine jQuery-Komponente in React.js zu konvertieren und eines der Dinge, die ich habe Schwierigkeiten mit ist Rendering n Anzahl von Elementen auf der Grundlage einer für Schleife.
Ich verstehe, dass dies nicht möglich ist, oder empfohlen, und dass, wenn ein Array im Modell vorhanden ist, es völlig sinnvoll ist, map
zu verwenden. Das ist gut, 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's mein Beispiel, ich möchte ein Element mit einer beliebigen Anzahl von span-Tags auf der Grundlage es's hierarchische Ebene vorangestellt. 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 nicht scheinen, um diese, oder etwas ähnliches in einer JSX React.js Komponente zu arbeiten. Stattdessen musste ich das folgende tun, erste Gebäude ein temporäres Array auf die richtige Länge und dann Schleife das Array.
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 übersehe ich?
Aktualisiert: Ab React > 0.16
Die Render-Methode muss nicht unbedingt ein einzelnes Element zurückgeben. Es kann auch ein Array zurückgegeben werden.
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 hier zur Erklärung von 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 verwenden und sich es6 vorstellen
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 verpacken. Ich habe im obigen Beispiel div verwendet
Wie die Dokumentation hier sagt
Wenn Sie beispielsweise eine Liste von divs zurückgeben möchten, müssen Sie Ihre Komponenten in ein div, span oder eine andere Komponente einpacken.
Hier ist ein funktionelleres 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 verwende Object.keys(chars).map(...)
für eine Schleife im Rendering
// 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>
);
}