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

if inside loop of reactjs element in map function

本文关键字：内部 循环 元素 reactjs 映射函数 如果      更新时间：2023-09-26

大家好，我在 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>

相关文章：