反应，为循环中的最后两个元素插入一个包装器

Question

我有一个包含 5 个元素的列表

const numbers = [1, 2, 3, 4, 5];

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

如何添加一个包裹列表最后两个元素的 div 容器？

结果必须改变

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

到

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <div>
        <li>4</li>
        <li>5</li>
    </div>    
</ul>

Answer 1

您需要使用index 并有一个条件：

类似这样的：

const numbers = [1, 2, 3, 4, 5];

function NumberList(props) {
  const numbers = props.numbers;
  const firstList = numbers
    .slice(0, numbers.length - 2)
    .map(number => <li key={number.toString()}>{number}</li>);
  const lastList = numbers
    .slice(-2)
    .map(number => <li key={number.toString()}>{number}</li>);
  return (
    <ul>
      {firstList}
      <div>{lastList}</div>
    </ul>
  );
}

或者在这个现场 sn-p 中更干净一点：

function App() {
  function NumberList(props) {
    const numbers = [1, 2, 3, 4, 5];
    const firstList = numbers
      .slice(0, numbers.length - 2)
      .map(number => <li key={number.toString()}>{number}</li>);
    const lastList = numbers
      .slice(-2)
      .map(number => <li key={number.toString()}>{number}</li>);
    return (
      <ul>
        {firstList}
        <div>{lastList}</div>
      </ul>
    );
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {NumberList()}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>