如何在JSX的map循环中一次返回两个<li>元素？

你说得对，JSX的返回值确实要求只能有一个根元素，直接返回两个<li>会报错。不过有几种简单的方法可以解决这个问题，我给你详细说下：

方法1：使用React片段（Fragment） #

这是最推荐的方式，因为片段不会在DOM中生成额外的包裹元素，完全符合你的需求。你可以用完整的<React.Fragment>标签，或者更简洁的<>简写形式：

修改后的代码如下（顺便优化了计数逻辑，用map自带的index代替外部的i变量，避免闭包问题）：

<ul className="users">
  {users.slice(sliceTopNum, users.length).map((user, index) => {
    // 用index + 1来计数，因为index从0开始
    const itemCount = index + 1;
    if (itemCount % 5 === 0) {
      return (
        <li key={`ad-${itemCount}`}>
          <div>
            <p>I am an Ad</p>
          </div>
        </li>
      );
    } else {
      // 用片段包裹两个li元素
      return (
        <>
          <li key={`user-${itemCount}`}>
            <div>
              <p>I am {coupon.name}</p>
            </div>
          </li>
          <li key={`ad-${itemCount}`}>
            <div>
              <p>I am an Ad</p>
            </div>
          </li>
        </>
      );
    }
  })}
</ul>

注意：每个列表项都需要添加唯一的key属性，这是React列表渲染的要求，避免警告和渲染问题。

方法2：返回元素数组 #

你也可以直接返回一个包含两个<li>的数组，同样需要给每个元素添加唯一的key：

<ul className="users">
  {users.slice(sliceTopNum, users.length).map((user, index) => {
    const itemCount = index + 1;
    if (itemCount % 5 === 0) {
      return (
        <li key={`ad-${itemCount}`}>
          <div>
            <p>I am an Ad</p>
          </div>
        </li>
      );
    } else {
      // 返回包含两个li的数组
      return [
        <li key={`user-${itemCount}`}>
          <div>
            <p>I am {coupon.name}</p>
          </div>
        </li>,
        <li key={`ad-${itemCount}`}>
          <div>
            <p>I am an Ad</p>
          </div>
        </li>
      ];
    }
  })}
</ul>

两种方法都能实现你的需求，片段的方式更简洁且无额外DOM节点，是首选方案。另外提醒一下，原来代码中使用外部的i变量可能会因为闭包导致计数错误，改用map的第二个参数index来计数会更可靠。

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