如何在 React 中使用 While 循环遍历数组并传递索引值

在React开发中，遍历数组并渲染对应内容是常见需求，多数场景我们会使用数组自带的map方法，但部分需要自定义遍历逻辑的场景下，while循环会是更合适的选择，同时还需要将遍历过程中的索引值传递到渲染元素中。

函数组件中使用while循环遍历数组

在函数组件中，我们可以先声明一个空数组用来存放渲染元素，再通过while循环遍历目标数组，在循环过程中手动维护索引值，将索引和数组项一起存入结果数组。

import React from 'react';

const ListComponent = () => {
  // 待遍历的目标数组
  const targetArray = ['苹果', '香蕉', '橙子', '葡萄'];
  // 存放渲染结果的数组
  const renderList = [];
  // 初始化索引和循环条件变量
  let index = 0;
  let currentItem = targetArray[index];

  // while循环遍历数组
  while (currentItem !== undefined) {
    // 将索引和数组项一起存入渲染数组
    renderList.push(
      <li key={index}>
        索引：{index}，内容：{currentItem}
      </li>
    );
    // 索引自增，更新当前项
    index++;
    currentItem = targetArray[index];
  }

  return (
    <div>
      <h3>水果列表</h3>
      <ul>{renderList}</ul>
    </div>
  );
};

export default ListComponent;

代码逻辑说明

上述代码中，我们首先定义了目标数组targetArray和用来存储渲染元素的renderList数组，然后初始化索引变量index为0，通过targetArray[index]获取当前遍历项。while循环的条件是当前项不为undefined，每次循环中将索引和当前项组合成<li>元素存入renderList，之后索引自增，更新当前项，直到遍历完所有数组元素。

类组件中使用while循环遍历数组

在类组件中，我们可以在render方法内部实现while循环的逻辑，同样通过手动维护索引值来完成遍历和传递。

import React, { Component } from 'react';

class ListClassComponent extends Component {
  render() {
    const targetArray = ['红色', '蓝色', '绿色', '黄色'];
    const renderList = [];
    let index = 0;
    let currentItem = targetArray[index];

    while (currentItem !== undefined) {
      renderList.push(
        <div key={index} style={{ margin: '8px 0' }}>
          <span>第{index + 1}项：</span>
          <span style={{ color: currentItem }}>{currentItem}</span>
        </div>
      );
      index++;
      currentItem = targetArray[index];
    }

    return (
      <div>
        <h3>颜色列表</h3>
        {renderList}
      </div>
    );
  }
}

export default ListClassComponent;

while循环与map方法的差异对比

虽然map方法能更简洁地完成数组遍历，但while循环在部分场景下更有优势，两者的核心差异如下：

注意事项

• while循环遍历数组时，一定要手动维护索引的自增，避免出现死循环，同时要确保循环终止条件正确，防止数组越界。
• 渲染列表元素时，必须给每个元素添加唯一的key属性，这里可以直接使用while循环维护的索引值作为key，但要确保索引的唯一性。
• 如果不需要自定义遍历逻辑，优先使用map方法，代码可读性和简洁度会更好，while循环更适合需要特殊遍历逻辑的场景。

需要注意的是，while循环遍历数组传递索引时，索引值是循环过程中实时维护的变量，只要保证索引自增逻辑正确，就不会出现索引错乱的问题，和map方法返回的索引值作用一致。

Reactwhile_循环数组遍历索引传递修改时间：2026-07-12 11:27:27