在数组的最后一个元素之后将额外的元素注入jsx吗？

Question

How to render 'd' to below arrays?

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

Says I will assign ['a', 'b', 'c'] to const x how can I use map and render new element after c ? I can get last element like

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

but c will be gone, how to create the 4th element?

Answer 1

You can return both items in an array from the map callback:

 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> 

However, since you always add d to the end, you can just stick the tag after the loop:

 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>