Question

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

Answer 1

您可以递归呈现用户：

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>

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

1 个答案: