Wie dynamisch JSX-Komponente X mal rendern?

Question

Betrachten wir ein einfaches Beispiel für die Render-Funktion einer Komponente reagieren:

render() { 
    const rowLimit = this.props.rowLimit ? this.props.rowLimit : 5 
    return (
    <tbody> 
     {row()} 
     {row()} 
     {row()} 
     {row()} 
     {row()} 
    </tbody> 
) 
} 

Derzeit rowLimit ist nutzlos .. aber ich möchte diese Zahl verwenden, wie viele {rows()} s gemacht werden, zu bestimmen. Gibt es einen sauberen Weg, dies zu tun?

eine for (let i = 0; i < rowLimit; i++) Schleife fühlt klobig ... Ich vergibt Style-Punkte für eine bessere Lösung

Hinweis: row() ein JSX Element so etwas wie dieses gibt

Answer 1

können Sie Array#from verwenden Grenze auf ein Array von Zeilen zu konvertieren:

class Tbody extends React.Component { 
 
    render() { 
 
    const { rowLimit = 5 } = this.props; // destructure with defaults instead of trinary 
 
    
 
    return (
 
     <tbody> 
 
     { 
 
     Array.from({ length: rowLimit }, (_, k) => (
 
      <tr key={k}> 
 
      <td>{k}</td> 
 
      </tr> 
 
     )) 
 
     } 
 
     </tbody> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <table> 
 
    <Tbody /> 
 
    </table>, 
 
    demo 
 
);

td { 
 
    border: 1px solid black; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="demo"></div>

Answer 2

Ich glaube, für Sie arbeiten:

render() { 
    const rowLimit = this.props.rowLimit ? this.props.rowLimit : 5; 
    let rows = []; 
    for (let i = 0; i < rowLimit; i++) { 
    rows.push(<Row key={Math.floor(Date.now() + i)} />); 
    } 

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

wo Row Ihre Zeilenkomponente ist, der Sie Requisiten hinzufügen können, wenn Sie möchten.

Answer 3

du { [...Array(rowLimit).keys()].map(() => row()) } mit lodash tun kann sogar das Array mit _.range(), aber meiner Meinung nach ist es ist genug, um ordentlich stevelacerda7 Lösung nicht wert schafft.