Ausgabe von n Instanzen einer React-Komponente

Question

Ich möchte n Instanzen einer React-Komponente erstellen.

Was ist eine gute knappe Art und Weise dies zu tun geben, dass JSX nur Ausdrücke enthalten kann?

Ich bin derzeit versucht, die folgenden:

<Wrapper> 
    {repeat(n)(i => <MyComponent i={i} />}  
</Wrapper> 

function repeat(n) { 
    return cb => Array(n).fill(null).forEach((_, i) => cb(i)); 
} 

Answer 1

Sie können so viel JavaScript als verwenden Sie :)

render() { 
    const lst = [1, 2, 3, 4]; 
    return (
    <div> 
     {lst.map(itm => <span key={itm}>{itm}</span>)} 
    </div> 
); 
} 

Wenn Sie nicht ein key bereit haben, können Sie die zweite verwenden Argument des Karten-Callbacks, welches der Index im Array ist. More info on MDN.

In Ihrem speziellen Fall, in dem Sie nicht einen Array haben aber nur eine Zahl:

render() { 
    var times = []; 
    for (let i = 0; i < 10; i++) { 
    times.push(<MyComponent key={i} i={i} />); 
    } 
    return <Wrapper>{times}</Wrapper>; 
} 

Auch this answer auf überprüfen, wie for Schleifen verwenden. Es ist nicht ganz so schön, aber es funktioniert auch. Ich glaube, das React-Team hat vor, das Arbeiten mit Arrays in JSX einfacher zu gestalten.

Wenn Sie nur eine Nummer haben und keine for-Schleife verwenden möchten, können Sie sie auch "fälschen", z. B. indem Sie string.repeat verwenden. Nicht sicher, ob das aber sehr gut lesbar ist :)

render() { 
    return (
    <div> 
     {'a'.repeat(10).split('').map((_, i) => <MyComponent i={i} />} 
    </div> 
); 
}