Создайте несколько элементов React, используя одну функцию

Question

Я пытаюсь создать сетку с помощью одной функции, которая добавляет 50px к верхнему элементу css для каждой созданной строки.

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;

class MainPage extends Grid {
  render() {
    return(
      <div>
        {this.createGrid()}
      </div>
    )
  }
}

Как мне отрендерить это, чтобы создать x количество линий для сетки, а также увеличение вершины css на 50px

Answer 1

Вместо (типичной) функции просто создайте другой компонент 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;

class MainPage extends Component {
  render() {
    return(
      <div>
        <Grid items={50} />
      </div>
    )
  }
}

Кроме того, каждый элемент должен иметь top увеличение на 50px do top: i * 50

Демонстрационная версия:

class MainPage extends React.Component {
  render() {
    return(
      <div>
        <Grid items={50} />
      </div>
    )
  }
}

class Grid extends React.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"
        }}
      />
    ))
  }
}

ReactDOM.render(<MainPage />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

Для вашего генератора сетки, таким образом вы можете генерировать элементы и использовать их в функции рендеринга:

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;
  }

Но всегда отдавайте предпочтение композиции по наследованию классам в компонентах реагирования.