配列の最後の要素の後に余分な要素をjsxに挿入しますか？

Question

'd'を配列の下にレンダリングするには？

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

は私がc後に新しい要素をマッピングし、レンダリングに使用することができますかconst xに['a', 'b', 'c']を割り当てます言いますか？私は

のような最後の要素を得ることができます

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

しかし、Cは、どのように4番目の要素を作成するだろうか？

Answer 1

あなたがマップコールバックからの配列の両方のアイテムを返すことができます：あなたは、常に最後にDを追加するので、あなただけのループの後にタグを固執することができ、しかし

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>

：

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>