大家好，我在用 Reactjs 解决这个任务时遇到问题，不熟悉 JSX，而且没有太多 JS 教程。谁能帮我解决这个问题，我想在用户内部使用嵌套用户列表进行循环，嵌套深度最多为 3。
这是我的代码示例:
var testData = [{
"username": "test1",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": null
}]
}]
},{
"username": "test2",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": null
}]
}]
}];
function handleClick(item) {
console.log(item);
};
var Tester = React.createClass({
displayName: 'Tester',
render: function render() {
return React.createElement(
'ol', {
id: "user-list",
'className': ''
},
this.props.users.map(function(item, i) {
return React.createElement(
'li',
{
'className': '',
id: "user-li-" + i,
onClick: handleClick.bind(this, item),
key: i
},
item.username
//here should be next nest?
)
})
);
}
});
React.render(React.createElement(Tester, {
users: testData
}), document.getElementById('example'));<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js" data-semver="0.14.7" data-require="react@*"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="example"></div>
</body>
</html>最佳答案
您可以递归地呈现用户:
var testData = [{
"username": "test1",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": null
}]
}]
},{
"username": "test2",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": [{
"username": "test2",
"users": null
}, {
"username": "test3",
"users": null
}, {
"username": "test4",
"users": null
}]
}]
}];
function handleClick(item) {
console.log(item);
};
var Tester = React.createClass({
displayName: 'Tester',
render: function render() {
var renderUsers = function(users, deep) {
if (deep === 0)
return null;
return React.createElement(
'ol', {
id: "user-list",
'className': ''
},
users.map(function(item, i) {
return React.createElement(
'li',
{
'className': '',
id: "user-li-" + i,
onClick: handleClick.bind(this, item),
key: i
},
[React.createElement('span', null, item.username)].concat(item.users ? renderUsers(item.users, deep-1) : [])
)
})
);
}
return renderUsers(this.props.users, 3);
}
});
React.render(React.createElement(Tester, {
users: testData
}), document.getElementById('example'));<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js" data-semver="0.14.7" data-require="react@*"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="example"></div>
</body>
</html>关于javascript - if 在map函数中reactjs元素的内部循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35177157/