Javascript 使用一个函数创建多个React元素

我正在尝试使用一个函数对一个网格进行网格化，该函数为创建的每一行的顶部css元素添加50px

class Grid extends Component {

  createGrid = () => {
    for (let i = 1; i < 50; i++) {
      return(
        <div style={{
          position: "absolute",
          top: i * 5,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}>
        </div>
      )
    }
  }
}

export default Grid;

类网格扩展组件{
createGrid=（）=>{
for（设i=1；i<50；i++）{
返回(
)
}
}
}
导出默认网格；

class主页扩展了网格{
render（）{
返回(
{this.createGrid（）}
)
}
}

我将如何渲染它，以便它为网格创建x行，同时将顶部css增加50px，而不是（典型）函数，只需创建另一个执行此操作的React组件即可

比如：

class Grid extends Component {
  render() {
    return [...Array(this.props.items)].map((_x, i) => (
      <div
        key={i}
        style={{
          position: "absolute",
          top: i * 50,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}
      />
    ))
  }
}

export default Grid;

---

对于网格生成器，通过这种方式可以生成元素并在渲染功能中使用它们：

createGrid = () => {
    let grids = [];
    for (let i = 1; i <= 50; i++) {
      grids.push(
        <div style={{
          position: "absolute",
          top: i * 5,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}>
        </div>
      )
    }
    return grids;
  }

createGrid=（）=>{
设网格=[]；
对于（让i=1；我觉得这似乎是CSS/Flexbox需要做的事情，而不是在React中使用style prop手动内联完成的事情。我建议看一下这样的事情：首先，您可能应该将创建的每个元素推送到一个数组中，然后返回该数组。将return放在
fo中r
循环也将退出您的函数，因此当前您只返回循环第一次迭代的第一个元素。您将得到以下结果：
数组中的每个子元素都应该有一个唯一的“key”道具。
我猜。您还应该将唯一的key添加到映射中的
div
元素中function@CornelRaiu已修复：）编辑：nvm，在代码段中修复，但在代码块中忘记
class MainPage extends Component {
  render() {
    return(
      <div>
        <Grid items={50} />
      </div>
    )
  }
}

createGrid = () => {
    let grids = [];
    for (let i = 1; i <= 50; i++) {
      grids.push(
        <div style={{
          position: "absolute",
          top: i * 5,
          height: 1,
          width: "100%",
          backgroundColor: "#bfd8e0"
        }}>
        </div>
      )
    }
    return grids;
  }