[英]Iterate over object properties in JSX
React/JSX 新手,請多多包涵。 我有一個 API 返回一個 object 如下
var currObj = {
SKU : 'Test_SKU_120934',
category : 'Home',
inventory_status : 1.
}
我想遍歷這個 object 並返回一個 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 (
);
}
```
當您在評論中得到答案時,您必須使用 map 它將返回將在 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.
這是你需要的。 鏈接到工作解決方案。
import "./styles.css";
export default function App() {
var currObj = {
SKU: "Test_SKU_120934",
category: "Home",
inventory_status: 1
};
const objectArr = Object.keys(currObj).map((k, idx) => (
<li key={idx}>
<strong>{k}</strong>: {currObj[k]}
</li>
));
return (
<div className="App">
<ul>{objectArr}</ul>
</div>
);
}
return (
<ul>
{Object.entries(yourProp).map(([key,val]) => (
<li key={key}><strong>{key}</strong>: '{val}'</li>
))}
</ul>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.