React中如何在JSX内执行JS代码（如i++）且不输出为HTML？

你遇到的这个问题很常见——在JSX里直接写{i++}时，它会被当作表达式求值后输出成页面文本，而不是单纯执行索引递增的操作。这是因为JSX中{}包裹的内容会被当作JavaScript表达式计算，而i++本身会返回递增前的i值，所以这个值就被渲染到DOM里了。

你的核心思路是想实现“每两个元素放在一行”的双列布局，但把循环逻辑和JSX渲染逻辑混在一起，导致了这个问题。下面是两种符合JSX规范的解决方案：

方案一：手动控制循环步长（最直观的方式） #

把索引的递增逻辑完全放在for循环的条件里，每次直接处理两个元素，不需要在JSX内部修改索引：

const rows = [];
// 每次循环步进2，直接处理当前和下一个元素
for (let i = 0; i < items.length; i += 2) {
  const firstItem = items[i];
  // 检查是否存在第二个元素（避免数组越界）
  const secondItem = items[i + 1];

  let row;
  if (secondItem) {
    row = (
      <div className="bpa-module-tile-row">
        {this.getItem(firstItem)}
        {this.getItem(secondItem)}
      </div>
    );
  } else {
    // 处理最后一个单独的元素
    row = (
      <div className="bpa-module-tile-row">
        {this.getItem(firstItem)}
      </div>
    );
  }

  rows.push(row);
}

这种方式把索引控制完全和渲染逻辑分开，既避免了i++被输出的问题，代码逻辑也更清晰易懂。

方案二：先分组再渲染（函数式风格） #

先把原始数组转换成“每1-2个元素一组”的二维数组，再通过map渲染每组，完全不用手动控制索引：

// 第一步：将items分组，每组最多2个元素
const groupedItems = items.reduce((result, item, index) => {
  if (index % 2 === 0) {
    // 偶数索引时，新建一个分组
    result.push([item]);
  } else {
    // 奇数索引时，把元素加入上一个分组
    result[result.length - 1].push(item);
  }
  return result;
}, []);

// 第二步：渲染分组后的数组
const rows = groupedItems.map((group) => (
  <div className="bpa-module-tile-row">
    {group.map(item => this.getItem(item))}
  </div>
));

这种方式更符合React的函数式编程思路，先处理数据结构，再专注于渲染，代码更简洁，也不容易出错。

关键总结 #

JSX的{}是用来插入计算后的值的，不是用来执行带副作用的语句（比如修改循环变量）的。你的原代码问题就在于试图在JSX表达式中执行i++这种会修改外部变量的操作，遵循“数据处理和渲染逻辑分离”的原则就能避免这类问题。

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