如果在map函數中的reactjs元素內循環
[英]if inside loop of reactjs element in map function
問題描述
大家好，我在用JSX不熟悉的Reactjs中解決此任務時遇到問題，並且沒有太多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>
1 個解決方案
解決方案1
0 已采納 2016-02-03 12:50:46
您可以遞歸地呈現用戶：
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>
如何在 ReactJS 的 map 函數中使用 For 循環
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.