代码之家 › 专栏 › 技术社区 › Josh Simon

将数据映射到一个CSS网格中-如何为每个网格正方形返回一个元素?

css-grid reactjs css

Josh Simon · 技术社区 · 4 年前

假设我正在构建一个包含三个网格项的CSS网格,作为react项目中的一个组件。我希望在每个网格正方形中显示数据,这些数据来自以下数组:

const applicants = [

  {name: 'James',
   age: 35,
   experience: 'none'
  },
  {name: 'Kate',
   age: 27,
   experience: 'intermediate'
  },
  {name: 'Henry',
   age: 32,
   experience: 'senior'
  }
]

而不是将一个名称映射到每个方块。我该怎么解决这个问题?更多代码如下:

import React from 'react'

const applicants = [

  {name: 'James',
   age: 35,
   experience: 'none'
  },
  {name: 'Kate',
   age: 27,
   experience: 'intermediate'
  },
  {name: 'Henry',
   age: 32,
   experience: 'senior'
  }
]

const displayName = () =>{
  return (
    <div>
      {
        applicants.map(item=> {
        return <h1>{item.name}</h1>
      })
      }
    </div>
  )
}

export default displayName

import React from 'react'
import displayName from './displayName'

const Grid = () => {
  return(
    <div className = 'grid-container'>
      <div className = 'grid-item'>
        <displayName/>
      </div>
    <div className = 'grid-item'>
        <displayName/>
      </div>
    <div className = 'grid-item'>
        <displayName/>
      </div>
    </div>
  )
}


export default Grid

2 回复 | 直到 4 年前

Vishal V Mikko Maunu 4 年前

应该是另一个方向。请参考以下内容。

const displayName = props => <h1>{props.name}</h1>

import React from 'react'
import displayName from './displayName'

const applicants = [

  {name: 'James',
   age: 35,
   experience: 'none'
  },
  {name: 'Kate',
   age: 27,
   experience: 'intermediate'
  },
  {name: 'Henry',
   age: 32,
   experience: 'senior'
  }
]

const Grid = () => {
  return(
    <div className = 'grid-container'>
      {
        applicants.map(item=> {
          return (<div className = 'grid-item'>
                   <displayName name={item.name}/>
                 </div>)
        })
      }
      
    </div>
  )
}

Derek Williams 4 年前

不要在你的 displayItem 常量。在网格上执行,并将其用作功能组件。把你的阵法传给一个道具 Grid map

import React from 'react'
import displayName from './displayName'

const Grid = (props) => {
  return(
      <div className = 'grid-container'>
      { props.data.map((d, i) => (
         <div className = 'grid-item'>
            <displayName name={d.name} />
         </div>
       )}
      </div>
   )
}


export default Grid

这样做可能会解决你的问题。

div 迪夫

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前