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

Question

我创建了一个名为 React 的新组件，用于显示一些用户信息。我有一个对象数组中的每个用户数据。我想创建一个布局，在一个行容器（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>

如何制作这个布局？

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

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

Add new columns container every 3 column elements in React.js with Bulma.css

reactjs

bulma