如何在JSX中渲染传递动态索引字段？含简写优化需求

一、解决动态字段的语法错误 #

你之前的写法错误在于多了一个多余的.，访问对象动态属性的正确语法是对象[动态键名]，不需要在[前加.。

正确写法示例 #

方式1：提前提取字段键（可读性更好）

const fieldKey = `firstNameField-${index}`;
{
  field[fieldKey] && 
  <MyField key={field[fieldKey].id} field={field[fieldKey]} />
}

方式2：直接在JSX中使用动态键

{
  field[`firstNameField-${index}`] && 
  <MyField 
    key={field[`firstNameField-${index}`].id} 
    field={field[`firstNameField-${index}`]} 
  />
}

二、简化冗长的多层判断代码 #

针对你更新的重复冗长代码，可以通过两个方向简化：

1. 使用**可选链操作符?.**替代多层&&判断，它会自动在链上某个值为null/undefined时停止访问，避免报错；
2. 提前提取目标字段，避免重复书写长长的访问路径。

简化后的代码示例 #

推荐写法：提前提取目标字段

// 用可选链快速获取目标字段，中间任意节点不存在时返回undefined
const targetField = myContactObj?.gridItems?.[index]?.fields?.[0]?.[`firstNameField-${index}`];

{
  targetField && 
  <MyField 
    key={targetField.id} 
    field={targetField} 
    index={index} 
  />
}

备选写法：直接在判断中用可选链

{
  myContactObj?.gridItems?.[index]?.fields?.[0]?.[`firstNameField-${index}`] && 
  <MyField 
    key={myContactObj.gridItems[index].fields[0][`firstNameField-${index}`].id} 
    field={myContactObj.gridItems[index].fields[0][`firstNameField-${index}`]} 
    index={index} 
  />
}

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