React循环渲染列表时如何为最后两个元素包裹div容器

你可以把原数组拆分为前半部分（除开最后两个元素）和最后两个元素的分组，分别渲染即可，修改后的代码如下：

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

function NumberList(props) {
  const numbers = props.numbers;
  // 拆分数组：前缀为除最后两个外的所有元素，后缀为最后两个元素
  const prefixNumbers = numbers.slice(0, -2);
  const suffixNumbers = numbers.slice(-2);
  
  // 渲染前缀部分的li
  const prefixItems = prefixNumbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  // 渲染后缀部分的li，外层包裹div
  const suffixItems = (
    <div key="suffix-group">
      {suffixNumbers.map((number) => (
        <li key={number.toString()}>
          {number}
        </li>
      ))}
    </div>
  );

  return (
    <ul>
      {prefixItems}
      {suffixItems}
    </ul>
  );
}

注意：按照HTML标准规范，<ul>的直接子元素只能是<li>、<script>、<template>三类，直接嵌套<div>属于无效的HTML结构，可能会导致渲染异常或 accessibility 问题。如果没有强制要求必须用div包裹，更推荐的写法是把外层div换成<li>，内部再嵌套<ul>承载最后两个元素。

内容的提问来源于stack exchange，提问作者Koala7