Question

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

我检查了其他类似create new row after every 3 column in loop的问题，并且所有人都在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>
)

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

1 个答案: