web-dev-qa-db-de.com

Schleife in React JSX

Ich versuche in React JSX (wobei ObjectRow eine separate Komponente ist) so etwas wie das Folgende:

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

Ich verstehe und verstehe, warum dies keine gültige JSX ist, da JSX Funktionsaufrufen zugeordnet ist. Ich komme jedoch aus Template-Land und ist neu in JSX. Ich bin mir nicht sicher, wie ich dies erreichen würde (eine Komponente mehrfach hinzufügen).

892
Ben Roberts

Stellen Sie sich vor, als würden Sie nur JavaScript-Funktionen aufrufen. Sie können keine for-Schleife verwenden, in der die Argumente für einen Funktionsaufruf enthalten wären:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

Sehen Sie, wie der Funktion tbody eine for-Schleife als Argument übergeben wird. Dies ist natürlich ein Syntaxfehler.

Sie können jedoch ein Array erstellen und dieses dann als Argument übergeben:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.Push(ObjectRow());
}
return tbody(rows);

Bei der Arbeit mit JSX können Sie grundsätzlich dieselbe Struktur verwenden:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.Push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Im Übrigen ist mein JavaScript-Beispiel fast genau das, was dieses Beispiel von JSX in verwandelt. Spielen Sie mit Babel REPL , um ein Gefühl für die Funktionsweise von JSX zu bekommen.

906
Sophie Alpert

Nicht sicher, ob dies für Ihre Situation geeignet ist, aber oft ist map eine gute Antwort.

Wenn dies Ihr Code mit der for-Schleife war:

<tbody>
    for (var i=0; i < objects.length; i++) {
        <ObjectRow obj={objects[i]} key={i}>
    } 
</tbody>

Sie könnten es mit map so schreiben:

<tbody>
    {objects.map(function(object, i){
        return <ObjectRow obj={object} key={i} />;
    })}
</tbody>

ES6-Syntax:

<tbody>
    {objects.map((object, i) => <ObjectRow obj={object} key={i} />)}
</tbody>
726
FakeRainBrigand

Wenn Sie nicht bereits über ein Array für map() wie die Antwort von @ FakeRainBrigand verfügen und dies inline einfügen möchten, entspricht das Quelllayout der Ausgabe, die näher an der von @ SophieAlpert liegt:

Mit ES2015 (ES6) -Syntax (Spread- und Pfeilfunktionen)

http://plnkr.co/edit/mfqFWODVy8dKQQOkIEGV?p=preview

<tbody>
  {[...Array(10)].map((x, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

Re: Transpiling mit Babel, seine Vorbehaltsseite besagt, dass Array.from für die Verteilung erforderlich ist, aber derzeit (v5.8.23) scheint dies nicht der Fall zu sein, wenn eine tatsächliche Array verteilt wird. Ich habe ein Dokumentationsproblem offen, um das zu klären. Aber auf eigenes Risiko oder Polyfill verwenden.

Vanille ES5

Array.apply

<tbody>
  {Array.apply(0, Array(10)).map(function (x, i) {
    return <ObjectRow key={i} />;
  })}
</tbody>

Inline IIFE

http://plnkr.co/edit/4kQjdTzd4w69g8Suu2hT?p=preview

<tbody>
  {(function (rows, i, len) {
    while (++i <= len) {
      rows.Push(<ObjectRow key={i} />)
    }
    return rows;
  })([], 0, 10)}
</tbody>

Kombination von Techniken aus anderen Antworten

Behalten Sie das Quelllayout der Ausgabe bei, aber machen Sie den eingebetteten Teil kompakter:

render: function () {
  var rows = [], i = 0, len = 10;
  while (++i <= len) rows.Push(i);

  return (
    <tbody>
      {rows.map(function (i) {
        return <ObjectRow key={i} index={i} />;
      })}
    </tbody>
  );
}

Mit ES2015-Syntax- & Array-Methoden

Mit Array.prototype.fill können Sie dies als Alternative zu Spread verwenden, wie oben gezeigt:

<tbody>
  {Array(10).fill(1).map((el, i) =>
    <ObjectRow key={i} />
  )}
</tbody>

(Ich denke, Sie könnten tatsächlich keine Argumente für fill() auslassen, aber ich bin nicht zu 100% damit beschäftigt.) Vielen Dank an @FakeRainBrigand für die Korrektur meines Fehlers in einer früheren Version der fill()-Lösung (siehe Revisionen).

key

In allen Fällen verringert die Variable key eine Warnung mit dem Entwicklungs-Build, ist aber nicht für das untergeordnete Element zugänglich. Sie können ein zusätzliches Attribut übergeben, wenn der Index im untergeordneten Element verfügbar sein soll. Siehe Listen und Schlüssel zur Diskussion.

358
JMM

Verwenden Sie einfach die Methode map Array mit der ES6-Syntax:

<tbody>
  {items.map(item => <ObjectRow key={item.id} name={item.name} />)} 
</tbody>

Vergessen Sie nicht die key-Eigenschaft.

61
danielfeelfine

Die Verwendung der Array map - Funktion ist eine sehr gebräuchliche Methode zum Durchlaufen eines Array von Elementen und zum Erstellen von Komponenten in React . Dies ist eine großartige Möglichkeit, eine Schleife zu erstellen, die ziemlich effizient und aufgeräumt ist So machen Sie Ihre Schleifen inJSX, Es ist nicht der einzige Weg, es zu tun, aber der bevorzugte Weg.  

Vergessen Sie auch nicht, einen eindeutigen Schlüssel für jede Iteration nach Bedarf zu haben. Kartenfunktion erstellt einen eindeutigen Index von 0, es wird jedoch nicht empfohlen, den producd-Index zu verwenden. Wenn Ihr Wert jedoch eindeutig ist oder wenn ein eindeutiger Schlüssel vorhanden ist, können Sie sie verwenden:

<tbody>
  {numrows.map(x=> <ObjectRow key={x.id} />)}
</tbody>

Auch einige Zeilen vonMDN, wenn Sie mit der Map-Funktion auf Array nicht vertraut sind:

map ruft eine bereitgestellte Rückruffunktion einmal für jedes Element in einem .__ auf. Array, in der Reihenfolge, und erstellt aus den Ergebnissen ein neues Array. Ruf zurück wird nur für Indizes des Arrays aufgerufen, denen Werte zugewiesen sind einschließlich undefiniert. Es wird nicht nach fehlenden Elementen von .__ gerufen. Array (dh Indizes, die noch nie festgelegt wurden, die gelöscht wurden gelöscht wurden oder denen noch nie ein Wert zugewiesen wurde).

callback wird mit drei Argumenten aufgerufen: dem Wert des Elements der Index des Elements und das durchlaufene Array-Objekt.

Wenn ein thisArg-Parameter zum Zuordnen bereitgestellt wird, wird er als .__ verwendet. Callback ist dieser Wert. Andernfalls wird der Wert undefined als .__ verwendet. Es ist dieser Wert. Dieser Wert, den der Callback letztendlich beobachten kann, ist bestimmt nach den üblichen Regeln zur Bestimmung des Gesehenen durch eine Funktion.

map verändert nicht das Array, für das es aufgerufen wird (obwohl callback, falls aufgerufen, dies tun kann).

58
Alireza

Wenn Sie lodash bereits verwenden, ist die Funktion _.times praktisch.

import React, { Component } from 'react';
import Select from './Select';
import _ from 'lodash';

export default class App extends Component {
    render() {
        return (
            <div className="container">
                <ol>
                    {_.times(3, i =>
                        <li key={i}>
                            <Select onSelect={this.onSelect}>
                                <option value="1">bacon</option>
                                <option value="2">cheez</option>
                            </Select>
                        </li>
                    )}
                </ol>
            </div>
        );
    }
}
36
mpen

Sie können auch außerhalb des Rückgabeblocks extrahieren:

render: function() {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.Push(<ObjectRow key={i}/>);
    } 

    return (<tbody>{rows}</tbody>);
}
28

Ich weiß, dass dies ein alter Thread ist, aber Sie sollten vielleicht http://wix.github.io/react-templates/ überprüfen, wodurch Sie jsx-style-Vorlagen in react mit einigen Anweisungen verwenden können wie RT-Wiederholung).

Wenn Sie beispielsweise reaktionsvorlagen verwendet haben, wäre dies:

<tbody>
     <ObjectRow rt-repeat="obj in objects"/>
</tbody>
21
Etai

wenn Numrows ein Array ist, ist es sehr einfach.

<tbody>
   {numrows.map(item => <ObjectRow />)}
</tbody>

Array-Datentyp in React ist sehr besser, Array kann neue Arrays unterstützen und Filterung, Reduzierung usw. unterstützen.

17
lulin

Es gibt mehrere Antworten auf die Verwendung der map-Anweisung. Hier ist ein vollständiges Beispiel, das einen Iterator innerhalb der FeatureList -Komponente verwendet, um Feature -Komponenten basierend auf einer JSON-Datenstruktur namens features aufzulisten.

const FeatureList = ({ features, onClickFeature, onClickLikes }) => (
  <div className="feature-list">
    {features.map(feature =>
      <Feature
        key={feature.id}
        {...feature}
        onClickFeature={() => onClickFeature(feature.id)}
        onClickLikes={() => onClickLikes(feature.id)}
      />
    )}
  </div>
); 

Sie können den vollständigen FeatureList-Code auf GitHub anzeigen. Das Fixture features ist hier aufgelistet .

16
Manav Sehgal

nehmen wir an, wir haben eine Reihe von Artikeln in Ihrem Bundesstaat:

[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]

<tbody>
    {this.state.items.map((item) => {
        <ObjectRow key={item.id} name={item.name} />
    })} 
</tbody>
12

... oder Sie können auch ein Array von Objekten vorbereiten und einer Funktion zuordnen, um die gewünschte Ausgabe zu erhalten. Ich bevorzuge das, weil es mir hilft, die bewährte Methode des Codierens aufrechtzuerhalten, ohne Logik in der Rendite von Rendern. 

render() {
const mapItem = [];
for(let i =0;i<item.length;i++) 
  mapItem.Push(i);
const singleItem => (item, index) {
 // item the single item in the array 
 // the index of the item in the array
 // can implement any logic here
 return (
  <ObjectRow/>
)

}
  return(
   <tbody>{mapItem.map(singleItem)}</tbody>
  )
}
12

Verwenden Sie einfach .map(), um Ihre Sammlung zu durchlaufen und <ObjectRow>-Artikel mit Requisiten aus jeder Wiederholung zurückzugeben.

Angenommen, objects ist irgendwo ein Array ...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>

Wenn Sie diese Option in return () der render -Methode konvertieren möchten, wäre die einfachste Option die map () - Methode. Ordnen Sie Ihr Array mithilfe der map () - Funktion der JSX-Syntax zu (siehe unten) (ES6-Syntax wird verwendet).


In der übergeordneten Komponente:

<tbody> { objectArray.map((object, index) => <ObjectRow key={index} object={object}>) } </tbody>

Beachten Sie das key-Attribut, das Ihrer untergeordneten Komponente hinzugefügt wurde. Wenn Sie kein Schlüsselattribut angegeben haben, wird die folgende Warnung auf Ihrer Konsole angezeigt.

Warnung: Jedes untergeordnete Element in einem Array oder Iterator sollte .__ haben. eine einzigartige "Schlüssel" -Stütze.


Jetzt können Sie in der Komponente ObjectRow über die Eigenschaften des Objekts auf das Objekt zugreifen.

Inside ObjectRow-Komponente

const { object } = this.props

oder 

const object = this.props.object

Damit sollten Sie das Objekt abrufen, das Sie von der übergeordneten Komponente an die Variable object in der Komponente ObjectRow übergeben haben. Jetzt können Sie die Werte in diesem Objekt entsprechend Ihrem Zweck ausspucken.


Verweise : 

map () - Methode in Javascript

ECMA-Skript 6 oder ES6

11
bharadhwaj

Eine ES2015/Babel-Möglichkeit verwendet eine Generatorfunktion, um ein Array von JSX zu erstellen:

function* jsxLoop(times, callback)
{
    for(var i = 0; i < times; ++i)
        yield callback(i);
}

...

<tbody>
    {[...jsxLoop(numrows, i =>
        <ObjectRow key={i}/>
    )]}
</tbody>
11
David Q Hogan

Ich benutze das:

gridItems = this.state.applications.map(app =>
                            <ApplicationItem key={app.Id} app={app } />
                            );

PD: Vergiss niemals den Schlüssel, sonst wirst du viele Warnungen bekommen!

11
J C

Es gibt mehrere Möglichkeiten, dies zu tun. JSX wird schließlich zu JavaScript kompiliert. Solange Sie gültiges JavaScript schreiben, sind Sie gut.

Meine Antwort zielt darauf ab, alle wunderbaren Wege zu festigen, die hier bereits vorgestellt wurden:

Wenn Sie kein Array von Objekten haben, geben Sie einfach die Anzahl der Zeilen an:

innerhalb des return-Blocks erstellen Sie eine Array und verwenden Sie Array.prototype.map:

render() {
  return (
    <tbody>
      {Array(numrows).fill(null).map((value, index) => (
        <ObjectRow key={index}>
      ))}
    </tbody>
  );
}

verwenden Sie außerhalb des return-Blocks einfach eine normale JavaScript-for-Schleife:

render() {
  let rows = [];
  for (let i = 0; i < numrows; i++) {
    rows.Push(<ObjectRow key={i}/>);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

sofort aufgerufener Funktionsausdruck:

render() {
  return (
    <tbody>
      {() => {
        let rows = [];
        for (let i = 0; i < numrows; i++) {
          rows.Push(<ObjectRow key={i}/>);
        }
        return rows;
      }}
    </tbody>
  );
}

Wenn Sie ein Array von Objekten haben

innerhalb des return-Blocks .map() jedes Objekt zu einer <ObjectRow>-Komponente:

render() {
  return (
    <tbody>
      {objectRows.map((row, index) => (
        <ObjectRow key={index} data={row} />
      ))}
    </tbody>
  );
}

verwenden Sie außerhalb des return-Blocks einfach eine normale JavaScript-for-Schleife:

render() {
  let rows = [];
  for (let i = 0; i < objectRows.length; i++) {
    rows.Push(<ObjectRow key={i} data={objectRows[i]} />);
  } 
  return (
    <tbody>{rows}</tbody>
  );
}

sofort aufgerufener Funktionsausdruck:

render() {
  return (
    <tbody>
      {(() => {
        let rows = [];
        for (let i = 0; i < objectRows.length; i++) {
          rows.Push(<ObjectRow key={i} data={objectRows[i]} />);
        }
        return rows;
      })()}
    </tbody>
  );
}
10
Yangshun Tay

Ich neige dazu, einen Ansatz zu bevorzugen, bei dem die Programmierlogik außerhalb des Rückgabewerts von render erfolgt. Dies hilft, das, was tatsächlich gemacht wird, leicht zu grokieren.

Also würde ich wahrscheinlich so etwas tun:

import _ from 'lodash';

...

const TableBody = ({ objects }) => {
  const objectRows = objects.map(obj => <ObjectRow object={obj} />);      

  return <tbody>{objectRows}</tbody>;
} 

Zugegebenermaßen ist dies eine so kleine Menge Code, dass das Inlining gut funktionieren könnte.

9
Adam Donahue

ES2015 Array.from mit der Kartenfunktion + Taste

Wenn Sie nichts zu .map() haben, können Sie Array.from() mit der mapFn verwenden, um Elemente zu wiederholen:

<tbody>
  {Array.from({ length: 5 }, (v, k) => <ObjectRow key={k} />)}
</tbody>
9
Do Async

Ihr JSX-Code wird in reinen JavaScript-Code übersetzt. Alle Tags werden durch ReactElement-Objekte ersetzt. In JavaScript können Sie eine Funktion nicht mehrmals aufrufen, um die zurückgegebenen Variablen zu erfassen.

Es ist illegal, die einzige Möglichkeit ist, ein Array zum Speichern der von der Funktion zurückgegebenen Variablen zu verwenden.

Oder Sie können Array.prototype.map verwenden, das seit JavaScript ES5 verfügbar ist, um diese Situation zu behandeln.

Vielleicht können wir einen anderen Compiler schreiben, um eine neue JSX-Syntax zu erstellen, um eine Wiederholungsfunktion zu implementieren, genau wie Angulars ng-repeat .

9
hlissnake

sie können natürlich mit einer .map lösen, wie von der anderen Antwort vorgeschlagen. Wenn Sie babel bereits verwenden, könnten Sie über die Verwendung von jsx-control-statement .__ nachdenken. Sie erfordern ein wenig Einstellung, aber ich denke, es lohnt sich im Hinblick auf die Lesbarkeit (insbesondere für nicht reagierende Entwickler) .Wenn Sie einen Linter verwenden, gibt es auch eslint-plugin-jsx-control-statement

9
Jurgo Boemo

Um mehrere Male zu wiederholen und zurückzukehren, können Sie dies mit Hilfe von from und map erreichen:

  <tbody>
    {
      Array.from(Array(i)).map(() => <ObjectRow />)
    }
  </tbody>

wo i = number of times

8
Jee Mok

Dies kann auf mehrere Arten erfolgen.

  1. Wie oben vorgeschlagen, speichern Sie vor return alle Elemente im Array
  2. Schleife in return

    Methode 1

     let container =[];
        let arr = [1,2,3] //can be anything array, object 
    
        arr.forEach((val,index)=>{
          container.Push(<div key={index}>
                         val
                         </div>)
            /** 
            * 1. All loop generated elements require a key 
            * 2. only one parent element can be placed in Array
            * e.g. container.Push(<div key={index}>
                                        val
                                  </div>
                                  <div>
                                  this will throw error
                                  </div>  
                                )
            **/   
        });
        return (
          <div>
             <div>any things goes here</div>
             <div>{container}</div>
          </div>
        )
    

    Methode 2 

       return(
         <div>
         <div>any things goes here</div>
         <div>
            {(()=>{
              let container =[];
              let arr = [1,2,3] //can be anything array, object 
              arr.forEach((val,index)=>{
                container.Push(<div key={index}>
                               val
                               </div>)
                             });
                        return container;     
            })()}
    
         </div>
      </div>
    )
    
8
abhirathore2006

Ich benutze es gerne

<tbody>
{ numrows ? (
   numrows.map(obj => { return <ObjectRow /> }) 
) : null}
</tbody>
7
Sampath

Da Sie Javascript-Syntax in JSX-Code schreiben, müssen Sie Ihr Javascript in geschweifte Klammern einschließen.

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.Push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>
6
Rohit Jindal

Sie können auch eine selbstaufrufende Funktion verwenden: 

return <tbody>
           {(() => {
              let row = []
              for (var i = 0; i < numrows; i++) {
                  row.Push(<ObjectRow key={i} />)
              }
              return row

           })()}
        </tbody>
5
Fba Shad

Tolle Frage.

Wenn ich eine bestimmte Anzahl von Komponenten hinzufügen möchte, verwende ich eine Hilfsfunktion.

Definieren Sie eine Funktion, die JSX zurückgibt:

const myExample = () => {
    let myArray = []
    for(let i = 0; i<5;i++) {
        myArray.Push(<MyComponent/>)
    }
    return myArray
}

//... in JSX

<tbody>
    {myExample()}
</tbody>
5

Hier ist eine einfache Lösung dafür.

var Object_rows=[];
for (var i=0; i < numrows; i++) {
    Object_rows.Push(<ObjectRow/>)
} 
<tbody>
{Object_rows}
</tbody>

Kein Mapping und kein komplexer Code erforderlich. Sie müssen lediglich die Zeilen in das Array verschieben und die Werte zurückgeben, um sie zu rendern.

5
Javasamurai

Sie können so etwas tun:

let foo = [1,undefined,3]
{ foo.map(e => !!e ? <Object /> : null )}

Selbst dieser Code macht die gleiche Arbeit.

    <tbody>
      {array.map(i => 
        <ObjectRow key={i.id} name={i.name} />
      )}
    </tbody>
4
Amruth LS

Hier ein Beispiel von React doc: https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions-as-children

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

ich empfehle Ihnen, wie folgt zu schreiben:

function render() {
  return (
    <tbody>
      {numrows.map((roe, index) => <ObjectRow key={index} />)}
    </tbody>
  );
}

Bitte beachten Sie, dass der Key sehr wichtig ist, da React Key verwendet, um die Daten im Array zu unterscheiden.

4
Sinka Lee

im Folgenden sind mögliche Lösungen aufgeführt, die Sie in Reaktionsintervallen eines sich wiederholenden Arrays von Objekten oder eines einfachen Arrays ausführen können

const rows = [];
const numrows = [{"id" : 01, "name" : "abc"}];
numrows.map((data, i) => {
   rows.Push(<ObjectRow key={data.id} name={data.name}/>);
});

<tbody>
    { rows }
</tbody>

OR

const rows = [];
const numrows = [1,2,3,4,5];
for(let i=1, i <= numrows.length; i++){
   rows.Push(<ObjectRow key={numrows[i]} />);
};

<tbody>
    { rows }
</tbody>

Aktualisieren:

ein noch besserer Ansatz, den ich mit den letzten Tagen für das Durchlaufen von Arrays von Objekten kenne, ist .map direkt im Rendern mit oder ohne Rückkehr 

.map mit return

   const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
       {numrows.map(data=> {
             return <ObjectRow key={data.id} name={data.name}/>
       })}
</tbody>

.map ohne rückkehr

   const numrows = [{"id" : 01, "name" : "abc"}];
 <tbody>
       {numrows.map(data=> (
             <ObjectRow key={data.id} name={data.name}/>
       ))}
</tbody>
4
Hemadri Dasari

Nun, los gehts.

{
 [1, 2, 3, 4, 5, 6].map((value, index) => {
  return <div key={index}>{value}</div>
 })
}

Alles, was Sie tun müssen, ordnen Sie einfach Ihr Array zu und geben Sie zurück, was Sie rendern möchten. Vergessen Sie nicht, key im return-Element zu verwenden.

3
M Shafique

Das Problem ist, dass Sie kein jsx-Element zurückgeben. Es gibt andere Lösungen für solche Fälle, aber ich werde die einfachste anbieten: "Kartenfunktion verwenden"!

<tbody>
  { numrows.map(item => <ObjectRow key={item.uniqueField} />) }
</tbody>

Es ist so einfach und schön, nicht wahr?

3

wenn Sie den Array-Wert nicht drucken möchten, verwenden Sie den folgenden Code - 

  <div>
       {my_arr.map(item => <div>{item} </div> )}                    
  </div>
3
Som

Sie können ein IIFE verwenden, wenn Sie wirklich for-Schleife in JSX verwenden möchten.

<tbody>
  {
    (function () {
      const view = [];
      for (let i = 0; i < numrows; i++) {
        view.Push(<ObjectRow key={i}/>);
      }
      return view;
    }())
  }
</tbody>
3

@jacefarm Wenn ich das richtig verstehe, kannst du diesen Code verwenden:

<tbody>
    { new Array(numrows).fill(<ObjectRow/>) } 
</tbody>

Sie können diesen Code entweder verwenden:

<tbody>
   { new Array(numrows).fill('').map((item, ind) => <ObjectRow key={ind}/>) } 
</tbody>

Und das:

<tbody>
    new Array(numrows).fill(ObjectRow).map((Item, ind) => <Item key={ind}/>)
</tbody>
3
Bogdan Surai

Sie möchten einem Array Elemente hinzufügen und das Array von Elementen rendern.
Dies kann helfen, die für das erneute Rendern der Komponente erforderliche Zeit zu reduzieren.

Hier ist ein grober Code, der helfen könnte:

MyClass extends Component {
    constructor() {
        super(props)
        this.state = { elements: [] }
    }
    render() {
        return (<tbody>{this.state.elements}<tbody>)
    }
    add() {
        /*
         * The line below is a cheap way of adding to an array in the state.
         * 1) Add <tr> to this.state.elements
         * 2) Trigger a lifecycle update.
         */
        this.setState({
            elements: this.state.elements.concat([<tr key={elements.length}><td>Element</td></tr>])
        })
    }
}
3
Shawn Khameneh
return (
        <table>
          <tbody>
          {
            numrows.map((item, index) => {
              <ObjectRow data={item} key={index}>
            })
          }
          </tbody>
        </table>
      );
2
anshu purohit

Die Verwendung von Map in React ist eine bewährte Methode, um ein Array zu iterieren. 

Um einige Fehler mit es6 zu vermeiden, wird die Syntax-Map wie folgt verwendet: 

<tbody>
 {items.map((item, index) => <ObjectRow key={index} name={item.name} />)} 
</tbody>

Hier rufen Sie eine Komponente auf, so dass Sie nach dem Pfeil keine Klammern setzen müssen.

Aber du kannst auch das machen: 

{items.map((item, index) => (
<ObjectRow key={index} name={item.name} />
))}

oder : 

{items.map((item, index) => {
// here you can log item 
      return (
       <ObjectRow key={index} name={item.name} />
     )
})}

Ich sage das, weil, wenn Sie eine Klammer "{}" nach dem Pfeil setzen, wird kein Fehler ausgegeben und eine Whitelist angezeigt.

2
Quentin Malguy

Wenn numrows ein Array ist, wie die anderen Antworten, ist die Methode map am besten. Wenn dies nicht der Fall ist und Sie nur über die jsx darauf zugreifen, können Sie diese ES6-Methode auch verwenden: 

<tbody>
    { 
      [...Array(numrows).fill(0)].map((value,index)=><ObjectRow key={index} />)
    } 
</tbody>
2

Ich habe eine weitere Lösung gefunden, um der Karte zu folgen Rendern 

 <tbody>{this.getcontent()}</tbody>

Und separate Funktion 

 getcontent() {
const bodyarea = this.state.movies.map(movies => (
  <tr key={movies._id}>
    <td>{movies.title}</td>
    <td>{movies.genre.name}</td>
    <td>{movies.numberInStock}</td>
    <td>{movies.publishDate}</td>
    <td>
      <button
        onClick={this.deletMovie.bind(this, movies._id)}
        className="btn btn-danger"
      >
        Delete
      </button>
    </td>
  </tr>
));
return bodyarea;
}

dieses Beispiel löst viele Probleme auf einfache Weise

2
Saad Mirza
<tbody>
   numrows.map((row,index) => (
      return <ObjectRow key={index}/>
   )
</tbody>
2
vimal ram

Wann immer Sie JavaScript-Code in Ihre JSX einfügen müssen, sollten Sie {} und dann Ihren JavaScript-Code in diese Klammern setzen.  

Auf diese Weise können Sie innerhalb von jsx/reagieren.

Sagen:

   <tbody>
    {your piece of code in JavaScript }
  </tbody>

Beispiel:

   <tbody>
    { items.map( ( item ) > { console.log(item) }) } // items looping using map
  </tbody>
2
Must Keem J

schleife in Jsx ist sehr einfach versuchen Sie dies.

 {
      this.state.data.map((item,index)=>{
        return(
           <ComponentName key={index} data={item}/>
        );
      })
    }
2
chauhan amit

React-Elemente sind einfache JS, sodass Sie der Regel von Javascript folgen können. So können Sie eine for-Schleife in Javascript wie folgt verwenden: -

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

Die gültige und beste Methode ist jedoch die Verwendung der .map-Funktion. Unten gezeigt: -

<tbody>
    {listObject.map(function(listObject, i){
        return <ObjectRow key={i} />;
    })}
</tbody>

Hier ist eines wichtig: den Schlüssel definieren. Andernfalls wird eine Warnung wie diese ausgegeben: -

warning.js: 36 Warnung: Jedes untergeordnete Element in einem Array oder Iterator sollte .__ haben. eine einzigartige "Schlüssel" -Stütze. Überprüfen Sie die Render-Methode von ComponentName. Sehen "link" für weitere Informationen.

2
Jani Devang
render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.Push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}
1

verwenden Sie {} um Javascript innerhalb eines JSX-Blocks, um die JavaScript-Aktion, die Sie ausführen möchten, ordnungsgemäß auszuführen. 

<tr>
  <td>
    {data.map((item, index) => {
      {item}
    })}
  </td>
</tr>

Dies ist etwas vage, aber Sie können Daten für jedes Array austauschen. Dadurch erhalten Sie für jedes Element eine Tabellenzeile und ein Tabellenelement. Wenn Sie mehr als nur eine Sache in jedem Knoten des Arrays haben, möchten Sie dies gezielt anführen, indem Sie Folgendes tun:

<td>{item.someProperty}</td>

In diesem Fall möchten Sie es mit einem anderen td umgeben und das vorherige Beispiel anders gestalten.

1
esewalson

Es ist nicht möglich, eine Funktion zu deklarieren und mit Parametern zu versehen. In einer JSXExpression können Sie nur EXPRESSIONS und keine STATEMENTS wie for (), deklarierte Variablen oder Klassen oder eine if () -Anweisung schreiben.

Aus diesem Grund sind CallExpressions-Funktionen heutzutage so in Stimmung. Mein Rat, gewöhne dich an sie. Das würde ich tun:

const names = ['foo', 'bar', 'seba']
const people = <ul>{names.map(name => <li>{name}</li>)}</ul>

filterung:

const names = ['foo', undefined, 'seba']
const people = <ul>{names.filter(person => !!person).map(name => <li>{name}</li>)}</ul>

ob():

var names = getNames()
const people = {names && names.length && 
   <ul>{names.map(name => <li>{name}</li>)}</ul> }

ansonsten:

var names = getNames()
const people = {names && names.length ? 
  <ul>{names.map(name => <li>{name}</li>)}</ul> : <p>no results</p> }

Ich hoffe es hilft

1
cancerbero

Sie können eine neue Komponente wie folgt erstellen:

geben Sie den Schlüssel und die Daten so an Ihre ObjectRow Komponente weiter

export const ObjectRow = ({key,data}) => {
    return (
      <div>
          ...
      </div>
    );
}

erstellen Sie eine neue Komponente ObjectRowList, die sich wie ein Container für Ihre Daten verhält

export const ObjectRowList = (objectRows) => {
    return (
      <tbody>
        {objectRows.map((row, index) => (
          <ObjectRow key={index} data={row} />
        ))}
      </tbody>
    );
}
1
Mselmi Ali

Sie müssen in JSX schreiben 

<tbody>
    { 
    objects.map((object, i) => (
        <ObjectRow obj={object} key={i} />
    ));
    }
</tbody>
1
sultan aslam

Es gibt viele Lösungen, die ein Array durchlaufen und Jsx-Elemente erzeugen. Alle sind gut, aber alle verwendeten den Index direkt in einer Schleife. Es wird empfohlen, die eindeutige ID aus Daten als Schlüssel zu verwenden. Wenn jedoch keine eindeutige ID für jedes Objekt im Array vorhanden ist, verwenden wir den Index als Schlüssel. Es wird jedoch nicht empfohlen, den Index direkt als Schlüssel zu verwenden.

Eine weitere Sache, warum wir uns für .map entscheiden, aber warum nicht .foEach, weil .map ein neues Array zurückgibt. Es gibt heutzutage verschiedene Möglichkeiten, .map auszuführen. 

Die folgende Version der Verwendung von .map veranschaulicht detailliert, wie eindeutige Schlüssel verwendet werden und wie .map zum Durchlaufen von jsx-Elementen verwendet wird

.map ohne return, wenn ein einzelnes jsx-Element und eine eindeutige ID aus den Daten als Schlüsselversion zurückgegeben werden

const {objects} = this.state;

<tbody>
    {objects.map(object => <ObjectRow obj={object} key={object.id} />)}
</tbody>

.map ohne return, wenn mehrere jsx-Elemente und eine eindeutige ID aus den Daten als Schlüsselversion zurückgegeben werden

const {objects} = this.state;

<tbody>
    {objects.map(object => (
       <div key={object.id}>
          <ObjectRow obj={object} />
       </div>
    ))}
</tbody>

.map ohne return, wenn ein einzelnes jsx-Element und ein Index als Schlüsselversion zurückgegeben werden

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => <ObjectRow obj={object} key={`Key${index}`} />)}
</tbody>

.map ohne return, wenn mehrere jsx-Elemente zurückgegeben werden und als Schlüsselversion indexiert wird

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => (
       <div key={`Key${index}`}>
          <ObjectRow obj={object} />
       </div>
    ))}
</tbody>

.map with return, wenn mehrere jsx-Elemente zurückgegeben werden und als Schlüsselversion indexiert wird

const {objects} = this.state;

<tbody>
    {objects.map((object, index) => {
       return (
         <div key={`Key${index}`}>
            <ObjectRow obj={object} />
         </div>
       )
    })}
</tbody>

.map with return, wenn mehrere jsx-Elemente und eine eindeutige ID aus den Daten als Schlüsselversion zurückgegeben werden

const {objects} = this.state;

<tbody>
    {objects.map(object => {
       return (
         <div key={object.id}>
            <ObjectRow obj={object} />
         </div>
       )
    })}
</tbody>

Der andere Weg ist 

render(){
  const {objects} = this.state;
  const objectItems = objects.map(object => {
       return (
         <div key={object.id}>
            <ObjectRow obj={object} />
         </div>
       )
    })
return(
   <div>
     <tbody>
       {objectItems}
     </tbody>
   </div>
 )
}
1
Hemadri Dasari

Eine einfachere Lösung für den Fall, dass Sie eine bestimmte Zeilenanzahl verwenden möchten, die als Integer- Wert gespeichert wird. Mit Hilfe von typedArrays konnten wir die gewünschte Lösung auf folgende Weise erreichen.

// Let's create typedArray with length of `numrows`-value
const typedArray = new Int8Array(numrows); // typedArray.length is now 2
const rows = []; // Prepare rows-array
for (let arrKey in typedArray) { // Iterate keys of typedArray
  rows.Push(<ObjectRow key={arrKey} />); // Push to an rows-array
}
// Return rows
return <tbody>{rows}</tbody>; 
0
Jimi Pajala

Sie können die neue for of-Schleife ausprobieren 

const Apple = {
   color: 'red',
   size: 'medium',
   weight: 12,
   sugar: 10
}
for (const prop of Apple.entries()){
   console.log(prop);
}

Hier einige Beispiele: https://flaviocopes.com/react-how-to-loop/

0
Bert lucas