JSX中如何遍历对象属性 实现无序列表渲染

实现方案 #

JSX 仅支持嵌入返回单个节点或节点数组的表达式，for...in 属于流程控制语句，无法直接内嵌到 JSX 结构中。可先在 return 语句前遍历对象收集列表节点，再将节点数组嵌入 JSX 完成渲染。

补全后的 render 方法：

render () {
  // 遍历对象自身可枚举属性，生成li节点数组
  const listItems = Object.keys(currObj).map(propKey => (
    // 列表项必须携带唯一key，属性名本身全局唯一，直接复用即可
    <li key={propKey}>
      <strong>{propKey}</strong> : {currObj[propKey]}
    </li>
  ));

  return (
    <ul>
      {listItems}
    </ul>
  );
}

关键说明 #

• 选用Object.keys()而非for...in的原因：该方法返回对象自身所有可枚举属性组成的数组，搭配数组自带的map方法可直接返回JSX可识别的节点数组，无需手动声明变量push收集节点
• 必须为每个列表项添加key属性：React 渲染列表时依赖 key 完成虚拟DOM diff 优化，属性名不存在重复，直接用属性名作为key完全符合规则
• 上述代码渲染出的DOM结构和需求完全匹配，无需额外调整
• 注意：你提供的示例对象里inventory_status : 1.末尾的句点属于笔误，实际使用时需要移除，否则会触发JavaScript语法报错

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