在ReactJs中渲染一个对象数组 [英] Render an array of Objects in ReactJs
本文介绍了在ReactJs中渲染一个对象数组的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试浏览对象属性(此示例的名称)并在函数中的easy循环中列出它们。我发现了一些非常尴尬的方法,但这似乎不对。
I am trying to go through object properties (Name for this example) and list them within easy loop in function. I have found some pretty awkward way of doing this but it doesn't seem right.
这是我得到的:
const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const a = props.numbers;
return (
<ul>
{a.map((number) =>
<ListItem value={ItemsToSell[number].Name} />
)}
</ul>
);
}
const numbers = [0,1, 2];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
有一个更好的方法吗?
我只需要一个循环来遍历对象数组,列出所需的属性并创建许多html节点之一。
Is there a better way to do this? I simply need a loop to go through array of objects, list needed properties and create one of many html nodes.
推荐答案
你可以简单地映射 ItemsToSell
数组
const ItemsToSell = [{"Name":"Cup","Price":"99.99"},{"Name":"IPhone","Price":"99.99"},{
"Name":"Pen","Price":"99.99"}]
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
return (
<ul>
{ItemsToSell.map((obj, index) =>
<ListItem key={index} value={obj.Name} />
)}
</ul>
);
}
ReactDOM.render(
<NumberList />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
这篇关于在ReactJs中渲染一个对象数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文