Javascript 如果在映射函数中的reactjs元素的循环内

大家好，我在Reactjs中解决这个任务时遇到了问题。我不熟悉JSX，而且JS教程也不多。有人能帮我解决这个问题吗？我想在嵌套用户列表的用户内部创建一个循环嵌套深度最大为3

下面是我的代码示例：

var testData=[{
“用户名”：“test1”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：空
}]
}]
},{
“用户名”：“test2”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：空
}]
}]
}];
功能手柄点击（项目）{
控制台日志（项目）；
};
var Tester=React.createClass({
displayName:'Tester'，
render：函数render（）{
返回React.createElement(
“ol”{
id:“用户列表”，
“className”：”
},
this.props.users.map（函数（项，i）{
返回React.createElement(
"李",，
{
“类名”：“，
id:“用户li-”+i，
onClick:handleClick.bind（此项），
关键：我
},
item.username
//这里应该是下一个巢穴？
)
})
);
}
});
React.render（React.createElement）（测试仪{
用户：testData
})，document.getElementById（'example'）
您可以递归地呈现用户：


var testData=[{
“用户名”：“test1”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：空
}]
}]
},{
“用户名”：“test2”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：空
}]
}]
}];
功能手柄点击（项目）{
控制台日志（项目）；
};
var Tester=React.createClass({
displayName:'Tester'，
render：函数render（）{
var renderUsers=函数（用户，深度）{
如果（深度===0）
返回null；
返回React.createElement(
“ol”{
id:“用户列表”，
“className”：”
},
users.map（功能（项，i）{
返回React.createElement(
"李",，
{
“类名”：“，
id:“用户li-”+i，
onClick:handleClick.bind（此项），
关键：我
},
[React.createElement（'span'，null，item.username）].concat（item.users？renderUsers（item.users，deep-1）：[]）
)
})
);  
}
返回渲染器（this.props.users，3）；
}
});
React.render（React.createElement）（测试仪{
用户：testData
})，document.getElementById（'example'）
您可以递归地呈现用户：


var testData=[{
“用户名”：“test1”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：空
}]
}]
},{
“用户名”：“test2”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：[{
“用户名”：“test2”，
“用户”：空
}, {
“用户名”：“test3”，
“用户”：空
}, {
“用户名”：“test4”，
“用户”：空
}]
}]
}];
功能手柄点击（项目）{
控制台日志（项目）；
};
var Tester=React.createClass({
displayName:'Tester'，
render：函数render（）{
var renderUsers=函数（用户，深度）{
如果（深度===0）
返回null；
返回React.createElement(
“ol”{
id:“用户列表”，
“className”：”
},
users.map（功能（项，i）{
返回React.createElement(
"李",，
{
“类名”：“，
id:“用户li-”+i，
onClick:handleClick.bind（此项），
关键：我
},
[React.createElement（'span'，null，item.username）].concat（item.users？renderUsers（item.users，deep-1）：[]）
)
})
);  
}
返回渲染器（this.props.users，3）；
}
});
React.render（React.createElement）（测试仪{
用户：testData
})，document.getElementById（'example'）

谢谢@Bob Spunde的帮助：）谢谢@Bob Spunde的帮助：）