Ionic React中替代*ngFor="let row of data;"的列表渲染方法是什么？

React 没有内置类似 Angular *ngFor 的模板指令，你可以使用原生Array.map()方法遍历数组，实现动态渲染数据行的需求，具体实现如下：

前提说明 #

假设你从API获取到的数据数组命名为data，单条数据的参考结构如下（可根据你的实际返回字段调整）：

interface TableRowItem {
  // 优先使用业务唯一ID作为渲染key，无唯一ID可暂时用数组下标替代
  id: string;
  poiName: string;
  totalAssets: string | number;
  staticAssets: string | number;
  fluidAssets: string | number;
}

// 你的API返回数据数组
const data: TableRowItem[] = []

完整实现代码 #

<div className="table-wrapper">
  {/* 原有表头保持不变 */}
  <div className="header-row">
    <IonRow>
      <IonCol>PoiName</IonCol>
      <IonCol>Total Assets</IonCol>
      <IonCol>Static Assests</IonCol>
      <IonCol>Fluid Assests</IonCol>
    </IonRow>
  </div>

  {/* 动态渲染数据行 */}
  {data.map(row => (
    <IonRow key={row.id}>
      <IonCol>{row.poiName}</IonCol>
      <IonCol>{row.totalAssets}</IonCol>
      <IonCol>{row.staticAssets}</IonCol>
      <IonCol>{row.fluidAssets}</IonCol>
    </IonRow>
  ))}
</div>

注意事项 #

• map遍历生成的顶层元素必须绑定唯一key属性，若数组不会发生增删、排序操作，可临时用(row, index) => <IonRow key={index}>的写法。
• 代码内的字段名可根据你实际API返回的字段灵活替换。

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