Добавьте новый контейнер столбцов каждые 3 элемента столбца в React.js с Bulma.css - PullRequest
Новая
       12

Добавьте новый контейнер столбцов каждые 3 элемента столбца в React.js с Bulma.css

0 голосов
/ 14 января 2019

Я создаю новый реагирующий компонент, который отображает некоторую информацию о пользователе. У меня есть все пользовательские данные в массиве объектов. Я хочу создать макет, который показывает каждые 3 пользователя в контейнере строк (столбцы для среды Bulma css) с элементом столбца для каждого пользователя.

Я проверяю другие вопросы, подобные этому создаю новую строку после каждого 3 столбца в цикле и все используют закрывающие теги в HTML для создания макета, но в React.js все теги должны иметь закрывающий тег . 

users: [
{id:1, name: Tomas}
{id:2, name: Tomas}
{id:3, name: Tomas}
{id:4, name: Tomas}
{id:5, name: Tomas}
{id:6, name: Tomas}
]


return (
 ////

 const users = users.map(user,index) => {
  if (index % 3 === 0) {
  /// some code to create the layout
   }

  return <div className="column><User name={client.name}/></div>

  }
///
)

Я хочу сделать что-то вроде этого 

<div className="columns">
  <div className="column">
    <User id={users.id} name={users.name}/> // id 1
  <div>
  <div className="column">
    <User id={users.id} name={users.name}/> // id 2
  <div>
  <div className="column">
    <User id={users.id} name={users.name}/> // id 3
  <div>

</div>

<div className="columns">
  <div className="column">
    <User id={users.id} name={users.name}/> // id 4
  <div>
  <div className="column">
    <User id={users.id} name={users.name}/> // id 5
  <div>
  <div className="column">
    <User id={users.id} name={users.name}/> // id 6
  <div>

</div>

Как мне сделать этот макет?

1 Ответ

0 голосов
/ 14 января 2019

В React вы не можете генерировать код, как если бы вы работали с рендерингом сервера, таким как PHP или Ruby.

Сначала вы должны разбить ваш массив на подмассивы, и вы можете определить метод для него: 

const splitEvery = (array, length) =>
  array.reduce(
    (result, item, index) => {
      if ( index % length === 0 ) result.push([])
      result[Math.floor(index / length)].push(item)
      return result
    },
    []
  )

Затем в вашем методе рендеринга вы можете циклически разделить массив: 

return (
  <div>
  {
    splitEvery(users, 3).map(usersChunk => (
      <div className="columns">
        { usersChunk.map( user => (
            <div className="column">
              <User key={user.id} id={user.id} name={user.name} />
            <div>
          ))
        }
      </div>
    )
  }
  </div>
)
...