迭代 JSX 中的对象属性

Question

React/JSX 新手，请耐心等待。我有一个返回对象的 API，如下所示

var currObj = {
  SKU : 'Test_SKU_120934',
  category : 'Home',
  inventory_status : 1.
}

我想迭代这个对象并返回一个 html 无编号列表，如下所示

<ul>
  <li> <strong>SKU</strong> : 'Test_SKU_120934'</li>
  <li> <strong>category</strong>: 'Home' </li>
  <li> <strong>inventory_status</strong> : 1 </li> 
</ul>
```
I can accomplish this in normal Javascript using 'for...in' loop. However, that loop doesn't return anything. How do I write statement below?
```
render () {
    return (

    );
}
```

Answer 1

当您在评论中得到答案时，您必须使用地图，它将返回将在 jsx 中呈现的子项数组。

这是代码片段。

/* other react component body
.
.
.
*/

// targeted object
var currObj = {
  SKU : 'Test_SKU_120934',
  category : 'Home',
  inventory_status : 1.
}

const objectList = Object.keys(currObj).map(k => (
  <li
   key={k}
  ><strong>{k}</strong>: {currObj[k]}</li>
));

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

// here objectList is returned by the map function. and Object.keys function creates iterable array of keys from object.