[英]How to iterate nested objects and render inside jsx?
How can I render a nested map inside my jsx component? 如何在jsx组件中渲染嵌套映射?
I need to do the equivalent of a javascript for(key in groupItem){} See below. 我需要做相当于javascript的(key in groupItem){}见下文。
class MyComponent extends React.Component {
render () {
var options = this.props.options;
return (
<div>
{options.map(function(groupItem, key){ return (
/*
Unexpected Token if using groupItem.map?
{groupItem.map(function(){return })}
*/
)})}
</div>
)
}
}
Dropdown.defaultProps = {
options:[{
'groupX':{
'apple':'lovely green apple',
'orange':'juicy orange',
'banana':'fat banana'
}
}]
}
JSON.stringify(groupItems) === {
'groupX':{
'apple':'lovely green apple',
'orange':'juicy orange',
'banana':'fat banana'
}
}
WHY DON'T THESE WORK? 为什么这些不起作用?
groupItem.map - DOESN'T WORK groupItem.map - 不工作
Object.keys(groupItem).forEach(function (key){ - DOESN'T WORK Object.keys(groupItem).forEach(function(key){ - 不工作
You were almost right with your Object.keys implementation, (map is a property for arrays only), but the syntax error is coming from the wrapping {}
. 你的Object.keys实现几乎是对的,(map是仅用于数组的属性),但语法错误来自包装{}
。 You don't need to escape, you're already inside js
syntax. 你不需要逃避,你已经在js
语法中。
return (
<div>
{options.map(function(groupItem, key){ return (
Object.keys(groupItem).map(function(item){return (
<YourComponent group={groupItem} item={item} />
);})
);})}
</div>
);
I've decided to create my own method, due to the clunkyness of this. 由于这种笨拙,我决定创建自己的方法。
function each(obj, callback){
return (Array.isArray(obj))? forArray(obj, callback):forObject(obj, callback);
}
function forArray(obj, callback){
return obj.map(callback);
}
function forObject(obj, callback){
return Object.keys(obj).map(callback);
}
class MyComponent extends React.Component {
render () {
var options = this.props.options;
return (
<div>
{each(options, function(groupItem){ return (
each(groupItem, function(key){return (
This is much easier to read. 这更容易阅读。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.