injecter un élément supplémentaire dans jsx après le dernier élément du tableau?

Question

Comment rendre 'd' en dessous de tableaux?

const App =() => (
    <div style={styles}> 
    {['a', 'b', 'c'].map((o, i) => { 
     return (<div>{o}</div>) 
    } 
    )} 
    </div> 
); 

dit que je vais assigner ['a', 'b', 'c']-const x comment puis-je utiliser la carte et rendre nouvel élément après c? Je peux obtenir le dernier élément comme

{ 
    if(i === x.length - 1) { return('d') } 
} 

mais c sera parti, comment créer le 4ème élément?

Answer 1

Vous pouvez retourner les deux éléments d'un tableau à partir du rappel de carte:

const x = ['a', 'b', 'c']; 
 

 
const App =() => (
 
    <div> 
 
    {x.map((o, i) => { 
 
     if(i === x.length - 1) { 
 
     return [ 
 
      <div key={i}>{o}</div>, 
 
      <div key={i + 1}>d</div> 
 
     ]; 
 
     } 
 
     
 
     return (<div key={i}>{o}</div>) 
 
    } 
 
    )} 
 
    </div> 
 
); 
 

 
ReactDOM.render(
 
    <App />, 
 
    app 
 
);

<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="app"></div>

Cependant, puisque vous ajoutez toujours d à la fin, il vous suffit de coller l'étiquette après la boucle :

const x = ['a', 'b', 'c']; 
 

 
const App =() => (
 
    <div> 
 
    {x.map((o, i) => {  
 
     return (<div key={i}>{o}</div>) 
 
    } 
 
    )} 
 
    
 
    <div>d</div> 
 
    </div> 
 
); 
 

 
ReactDOM.render(
 
    <App />, 
 
    app 
 
);

<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="app"></div>