javascript - 在数组的最后一个元素之后将额外的元素注入(inject)到 jsx 中？

Question

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

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

说我将把 ['a', 'b', 'c'] 分配给 const x 如何在 之后使用 map 并渲染新元素c ？我可以获得最后一个元素，例如

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

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

Answer 1

您可以从 map 回调中返回数组中的两个项目:

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>