Sto provando a fare qualcosa di simile in React JSX(dove ObjectRow è un componente separato):

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

Mi rendo conto e capisco perché questo non è valido JSX, dal momento che le JSXmappe per funzionare chiamate. Tuttavia, venendo dalla terra dei modelli ed essendo nuovo JSX, non sono sicuro di come raggiungerei quanto sopra (aggiungendo un componente più volte).

Pensa come se stessi semplicemente chiamando le funzioni JavaScript. Non è possibile utilizzare un forciclo in cui andrebbero gli argomenti di una chiamata di funzione:

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

Guarda come tbodyviene passato un forloop alla funzione come argomento e, naturalmente, si tratta di un errore di sintassi.

Ma puoi creare un array e poi passarlo come argomento:

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

Puoi usare sostanzialmente la stessa struttura quando lavori con JSX:

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

Per inciso, il mio esempio JavaScript è quasi esattamente quello in cui si trasforma quell'esempio di JSX. Gioca con Babel REPL per avere un'idea di come funziona JSX.

Non sono sicuro se questo funzionerà per la tua situazione, ma spesso la mappa è una buona risposta.

Se questo era il tuo codice con il ciclo for:

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

Puoi scriverlo così con la mappa :

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

Sintassi ES6:

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

Se non si dispone già di un array per map()apprezzare la risposta di @ FakeRainBrigand e si desidera incorporarlo in modo che il layout di origine corrisponda all'output più vicino della risposta di @ SophieAlpert:

Con sintassi ES2015 (ES6) (funzioni di diffusione e freccia)

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

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

Ri: traspagando con Babele, la sua pagina di avvertenze dice che Array.fromè necessario per la diffusione, ma al momento ( v5.8.23) che non sembra essere il caso quando si diffonde un effettivo Array. Ho un problema di documentazione aperto per chiarirlo. Ma utilizzare a proprio rischio o polifill.

Vaniglia 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>

Combinazione di tecniche da altre risposte

Mantenere il layout di origine corrispondente all'output, ma rendere più compatta la parte incorporata:

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

Con sintassi e Arraymetodi ES2015

Con Array.prototype.fillte potresti farlo in alternativa all'utilizzo di spread come illustrato sopra:

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

(Penso che potresti davvero omettere qualsiasi argomento fill(), ma non ci sono al 100% su questo.) Grazie a @FakeRainBrigand per aver corretto il mio errore in una versione precedente della fill()soluzione (vedi revisioni).

key

In tutti i casi l' keyattr allevia un avvertimento con la build di sviluppo, ma non è accessibile nel bambino. Puoi passare un attr extra se desideri che l'indice sia disponibile nel bambino. Vedi Liste e chiavi per la discussione.

Semplicemente usando il metodo map Array con sintassi ES6:

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

Non dimenticare la keyproprietà.

Utilizzando Array mappa funzione è un modo molto comune per collegare attraverso un array di elementi e creare componenti secondo loro in Reagire , questo è un ottimo modo per fare un ciclo che è abbastanza efficiente e modo ordinato di fare i loop in JSX , E ' non è l'unico modo di farlo, ma il modo preferito.

Inoltre, non dimenticare di avere una chiave univoca per ogni iterazione come richiesto. La funzione Mappa crea un indice univoco da 0 ma non è consigliabile utilizzare l'indice prodotto ma se il tuo valore è unico o se esiste una chiave univoca, puoi usarli:

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

Inoltre, poche righe da MDN se non si ha familiarità con la funzione mappa sull'array:

map chiama una funzione di callback fornita una volta per ogni elemento in un array, in ordine, e costruisce un nuovo array dai risultati. il callback viene richiamato solo per gli indici dell'array a cui sono stati assegnati valori, anche non definiti. Non è richiesto per elementi mancanti dell'array (ovvero, indici che non sono mai stati impostati, che sono stati eliminati o ai quali non è mai stato assegnato un valore).

il callback viene invocato con tre argomenti: il valore dell'elemento, l'indice dell'elemento e l'oggetto Array attraversati.

Se un parametro thisArg viene fornito per mappare, verrà utilizzato come callback per questo valore. In caso contrario, verrà utilizzato il valore indefinito come questo valore. Questo valore alla fine osservabile dal callback è determinato secondo le normali regole per determinare ciò visto da una funzione.

map non muta l'array su cui viene chiamato (anche se il callback, se richiamato, può farlo).

Se stai già utilizzando lodash, la _.timesfunzione è utile.

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

Puoi anche estrarre al di fuori del blocco di ritorno:

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

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

So che questo è un vecchio thread, ma potresti voler controllare i React Templates , che ti permettono di usare i template in stile jsx in reag, con alcune direttive (come rt-repeat).

Il tuo esempio, se hai utilizzato i modelli di reazione, sarebbe:

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

Esistono diversi modi per farlo. JSX alla fine viene compilato in JavaScript, quindi finché scrivi un JavaScript valido, sarai bravo.

La mia risposta mira a consolidare tutti i meravigliosi modi già presentati qui:

Se non si dispone di una matrice di oggetti, semplicemente il numero di righe:

all'interno del returnblocco, creando un Arraye usando Array.prototype.map:

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

all'esterno del returnblocco, utilizzare semplicemente un normale ciclo for JavaScript:

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

espressione di funzione immediatamente invocata:

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

Se hai una matrice di oggetti

all'interno del returnblocco, .map()ogni oggetto a un <ObjectRow>componente:

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

all'esterno del returnblocco, utilizzare semplicemente un normale ciclo for JavaScript:

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

espressione di funzione immediatamente invocata:

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

se numrows è un array ed è molto semplice.

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

Il tipo di dati dell'array in React è molto migliore, l'array può supportare il nuovo array e supportare il filtro, ridurre ecc.

Esistono diverse risposte che indicano l'utilizzo mapdell'istruzione. Ecco un esempio completo utilizzando un iteratore all'interno elenco funzionalità componente alla lista delle funzioni dei componenti sulla base di una struttura dati JSON chiamato caratteristiche .

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

È possibile visualizzare il codice FeatureList completo su GitHub. L' apparecchio di funzionalità è elencato qui .

Per eseguire il ciclo più volte e tornare, puoi ottenerlo con l'aiuto di frome map:

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

dove i = number of times

Se si desidera assegnare ID chiave univoci ai componenti renderizzati, è possibile utilizzare React.Children.toArraycome proposto nella documentazione di React

React.Children.toArray

Restituisce la struttura dati opaca figlio come una matrice piatta con le chiavi assegnate a ciascun figlio. Utile se vuoi manipolare raccolte di bambini con i tuoi metodi di rendering, specialmente se vuoi riordinare o suddividere this.props.children prima di trasmetterlo.

Nota:

React.Children.toArray()cambia le chiavi per preservare la semantica delle matrici nidificate quando si appiattiscono gli elenchi di bambini. In altre parole, toArray prefigura ciascuna chiave dell'array restituito in modo che la chiave di ciascun elemento sia associata all'array di input che la contiene.

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

Se si sceglie di convertire questo metodo return () del metodo render , l'opzione più semplice sarebbe usare il metodo map () . Mappare l'array nella sintassi JSX utilizzando la funzione map (), come mostrato di seguito ( viene utilizzata la sintassi ES6 ).

Componente genitore interno :

<tbody>
   { objectArray.map(object => <ObjectRow key={object.id} object={object.value}>) }
</tbody>

Nota l' keyattributo aggiunto al componente figlio. Se non hai fornito un attributo chiave, puoi vedere il seguente avviso sulla tua console.

Avvertenza: ogni figlio di un array o di un iteratore dovrebbe avere un unico "oggetto" di prop.

Nota: un errore comune che le persone fanno è usare indexcome chiave durante l'iterazione, l'uso indexdell'elemento come chiave è un anti-schema e puoi leggere di più qui . In breve, se NON è un elenco statico, non utilizzare mai indexcome chiave.

Ora nel componente ObjectRow , è possibile accedere all'oggetto dalle sue proprietà.

Componente Inside ObjectRow

const { object } = this.props

o

const object = this.props.object

Questo dovrebbe recuperare l'oggetto che hai passato dal componente padre alla variabile objectnel componente ObjectRow . Ora puoi sputare i valori in quell'oggetto in base al tuo scopo.

Riferimenti :

metodo map () in Javascript

ECMA Script 6 o ES6

diciamo che abbiamo una serie di articoli nel tuo stato:

[{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>

Una possibilità ES2015 / Babel sta usando una funzione di generatore per creare un array di JSX:

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

...

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

... Oppure puoi anche preparare una matrice di oggetti e mapparla su una funzione per ottenere l'output desiderato. Preferisco questo, perché mi aiuta a mantenere la buona pratica della codifica senza logica all'interno del ritorno di render.

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

Basta usare .map()per scorrere la raccolta e restituire gli <ObjectRow>oggetti con oggetti di scena di ogni iterazione.

Supponendo che objectssia un array da qualche parte ...

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

ES2015 Array.from con la funzione map + tasto

Se non hai nulla .map()che puoi usare Array.from()con la mapfunzione per ripetere elementi:

<tbody>
  {Array.from({ length: 5 }, (value, key) => <ObjectRow key={key} />)}
</tbody>

Io lo uso questo:

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

PS: non dimenticare mai la chiave o avrai molti avvisi!

Tendo a favorire un approccio in cui la logica di programmazione avviene al di fuori del valore di ritorno di render. Questo aiuta a mantenere ciò che in realtà è reso facile da grok.

Quindi probabilmente farei qualcosa del genere:

import _ from 'lodash';

...

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

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

È vero che questa è una quantità così piccola di codice che la sua integrazione potrebbe funzionare bene.

puoi ovviamente risolvere con una .map come suggerito dall'altra risposta. Se usi già babel, potresti pensare di usare le istruzioni jsx-control. Richiedono un po 'di impostazione, ma penso che valga la pena in termini di leggibilità (specialmente per gli sviluppatori che non reagiscono). Se usi una linter, ci sono anche eslint-plugin-jsx-control-statement

Il tuo codice JSX verrà compilato in puro codice JavaScript, eventuali tag verranno sostituiti da ReactElementoggetti. In JavaScript, non è possibile chiamare più volte una funzione per raccogliere le variabili restituite.

È illegale, l'unico modo è utilizzare un array per memorizzare le variabili restituite dalla funzione.

Oppure puoi usare ciò Array.prototype.mapche è disponibile da JavaScript ES5 per gestire questa situazione.

Forse possiamo scrivere un altro compilatore per ricreare una nuova sintassi JSX per implementare una funzione di ripetizione proprio come quella di Angularng-repeat .

Questo può essere fatto in molti modi.

1. Come suggerito sopra, prima di returnmemorizzare tutti gli elementi nell'array

2. Loop dentro return

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

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

Ecco una soluzione semplice ad esso.

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

Non è necessario alcun mapping e codice complesso. È sufficiente inviare le righe nell'array e restituire i valori per renderlo.

Dato che stai scrivendo la sintassi Javascript all'interno del codice JSX, devi racchiudere il tuo Javascript tra parentesi graffe.

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

Ecco un esempio dal documento React: espressioni JavaScript come figli

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

come nel tuo caso, suggerisco di scrivere in questo modo:

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

Nota che la chiave è molto importante, perché React usa la chiave per differenziare i dati nell'array.

Lo uso come

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

Puoi fare qualcosa del tipo:

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

Ottima domanda

Quello che faccio quando voglio aggiungere un certo numero di componenti è usare una funzione di aiuto.

Definire una funzione che restituisce JSX:

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

//... in JSX

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

Puoi anche usare una funzione auto-invocante:

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

           })()}
        </tbody>