Schleife in einem reagieren Komponente

Question

ich habe folgendes reagieren Komponente

const Layout =() => { 
return (
    <ThemeProvider> 
     <Flex wrap> 
      <Box width={[1, 1/3]}> 
       <Text bold>Targeting</Text> 

       <Iconlist text="Something"/> 

      </Box> 
      <Box width={[1, 1/3]}> 
       <Text bold>Tactics</Text> 
      </Box> 
      <Box width={[1, 1/3]}> 
       <Text bold>Results</Text> 
      </Box> 

     </Flex> 
    </ThemeProvider> 

) 
}; 
export default Layout; 

ich so etwas implementieren möchten:

... 
<Iconlist text="Something"/> 
<Iconlist text="Something else"/> 
<Iconlist text="Something else else"/> 
<Iconlist text="Something ...."/> 
... 

Wie kann ich schreiben eine Schleife, die die oben dh Anzeige mehrere tun können Iconlist Komponente. Ich weiß, wie man Requisiten benutzt, um den "etwas" -Wert zu ändern, aber ich kann keine Schleife laufen lassen.

Ich versuchte dies:

<Box width={[1, 1/3]}> 
       <Text bold>Targeting</Text> 

       { 
        for(var i=0;i<=5;i++){ 
        <Iconlist text="Something"/> 
       } 
       } 

      </Box> 

Aber ich vermute, das ist nicht der richtige Weg, Javascript in zwischen injizieren. Ich bin ein Anfänger zum Reagieren und versuche zu lernen, wie man das macht. Was ist die beste Praxis?

Answer 1

können Sie verwenden Array.prototype.map()

Die map() Methode erstellt ein neues Array mit den Ergebnissen der auf jedes Element in der anrufenden Anordnung eine bereitgestellt Funktion aufrufen.

Beispiel

<Box width={[1, 1/3]}> 
    <Text bold>Targeting</Text> 
    { Array(5).map((i) => (<Iconlist key={i} text={`Something ${i}`} />)) } 
</Box> 

Answer 2

<Box width={[1, 1/3]}> 
    <Text bold>Targeting</Text> 
    { 
     ['something', 
     'something else', 
     'something else else', 
     'something ...', 
     ].map((text, index) => <Iconlist key={index} text={text}/>) 
    } 
</Box> 

Answer 3

Sie müssen zuerst die Textwerte in einem Array wie diese

const texts = ['something', 'something else' ..] 

Und in der Render-Methode fügen Sie folgendes

{ texts.map((text) => <Iconlist text={text}/>) } 

erklären

Answer 4

Sie Ihre Elemente in einem Array imZustand speichern kann:

... 

constructor(props) { 
    super(props) 
    this.state = { 
    items: [ 
     'something', 
     'something else', 
     'something else else', 
     'something ...' 
    ] 
    } 
} 

... 

... und Karte dann über das Array in Ihrem machen Funktion:

... 

{ 
    this.state.items.map(item => <Iconlist text={ item } />) 
} 

... 

Dies wird dann Rendern Sie neu, wenn Sie den Status aktualisieren.

Sie könnten auch in der Anordnung als prop passieren und dann wie folgt machen:

... 

{ 
    this.props.items.map(item => <Iconlist text={ item } />) 
} 

...