如何将数组映射中的每三个元素放入 div 反应中

Question

这是我的用户class里面我正在创建道具

  class User extends React.Component {
        constructor() {
            super();
        }

    render() {

        const usersStyle = {
            background: 'yellow',
            border: '1px solid black'
        }

        return <div className="users" style={usersStyle}>
            <p>имя: {this.props.name}</p>
            <p>фамилия: {this.props.surname}</p>
        </div>;
    }
}

这是我的应用程序 class 在里面我创建了一个数组 users 并且在数组里面有六个对象，每个对象的三元组必须放在一个 div

class App extends React.Component {
        constructor() {
            super();

    this.state = {
        users: [
            { name: 'Коля', surname: 'Иванов' },
            { name: 'Вася', surname: 'Петров' },
            { name: 'Петя', surname: 'Сидоров' },
            { name: 'Пётр', surname: 'Иванов' },
            { name: 'Алейсей', surname: 'Петров' },
            { name: 'Сергей', surname: 'Сидоров' },
        ],
    };
}

这里我创建了一张地图

render() {
const users = this.state.users.map((item, index) => {
    return <p>{item.name}</p>
});

这里逻辑本身发生了，我创建了一个名为 resultsRender 的数组 created for 并检查是否 i% 3 === 2 添加了一个新的 div，但是如何将三个元素放入其中clearfix class

    var resultsRender = [];
    for (var i = 0; i < users.length; i++) {
        resultsRender.push(users[i]);
        if (i % 3 === 2) {
            resultsRender.push(
                <div className="clearfix">
                    
            </div>
            );
        }
    }

    return <div>
        {resultsRender}
    </div>;
}

}

我想这样做

        <div class="clearfix">
            <p>Коля</p>
            <p>Вася</p>
            <p>Петя</p>
        </div>

        <div class="clearfix">
            <p>Пётр</p>
            <p>Алейсей</p>
            <p>Сергей</p>
        </div>

但是我是这样理解的

       <p>Коля</p>
       <p>Вася</p>
       <p>Петя</p>
       <div class="clearfix"></div>
       <p>Пётр</p>
       <p>Алейсей</p>
       <p>Сергей</p>
       <div class="clearfix"></div>

Answer 1

for...循环应将 i 递增 3。然后使用 Array.slice() 获取 3 个项目，然后使用 Array.map() 创建 JSX 行：

const Users = ({ users }) => {
    const resultsRender = [];
    
    for (var i = 0; i < users.length; i += 3) {
      resultsRender.push(
        <div className="clearfix">
        {
          users.slice(i, i + 3)
            .map(user => (
              <p>{user.name}</p>
            ))
        }
        </div>
      );
    }

  return (
    <div>
      {resultsRender}
    </div>
  );
};

const users = [{"name":"Коля","surname":"Иванов"},{"name":"Вася","surname":"Петров"},{"name":"Петя","surname":"Сидоров"},{"name":"Пётр","surname":"Иванов"},{"name":"Алейсей","surname":"Петров"},{"name":"Сергей","surname":"Сидоров"}];
      
ReactDOM.render(
  <Users users={users} />,
  root
);

.clearfix {
  border: 1px solid blue;
  margin: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

这里还有一个简单的选项：

    render() {
   
    const users = this.state.users.map((item, index) => {
        return <p>{item.name}</p>
      });
      
    var resultsRender = [];
    let userList = [];
    for (var i = 0; i < users.length; i++) {   
        userList.push(users[i]);
        if (i % 3 === 2) {
            resultsRender.push(
                <div className="clearfix">
                  {userList}
                </div>
            );
            userList = [];
        }
    }
    
   return <div>
            {resultsRender}
          </div>;
   }

如何将数组映射中的每三个元素放入 div 反应中

how to put every third element from an array map into a div react

arrays

dictionary

element

reactjs