使用 Bulma.css 在 React.js 中每 3 个列元素添加新的列容器

Question

我创建了一个名为的新反应组件，用于显示一些用户信息。我将每个用户数据都存储在对象数组中。我想创建一个布局，在行容器（Bulma css 框架的列）中显示每 3 个用户，并为每个用户提供一个列元素。

我检查了类似这样的其他问题，在循环中每 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>

我怎样才能做出这个布局？

Answer 1

在 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>
)