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

Question

如何将 'd' 渲染到下面的数组？

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

说我会将['a', 'b', 'c'] 分配给const x 如何在c 之后使用地图和渲染新元素？我可以得到像

这样的最后一个元素

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

但是c会消失，如何创建第4个元素？

Answer 1

您可以从地图回调中返回数组中的两个项目：

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>

但是，由于您总是将 d 添加到末尾，因此您可以将标签粘贴在循环之后：

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>