Как расположить два дива с одинаковыми классами вертикально друг под другом?

Для того чтобы расположить два дива с одинаковыми классами вертикально друг под другом в React, вы можете использовать различные методы.

Вариант 1: Использование стандартных средств CSS
Самым простым способом будет использование стандартных средств CSS, таких как display: flex или display: block, для управления размещением элементов.

Пример:

<div className="parent">
  <div className="child">Див 1</div>
  <div className="child">Див 2</div>
</div>

.parent {
  display: flex;
  flex-direction: column;
}

.child {
  /* Ваши стили */
}

В этом примере мы создаем родительский контейнер (parent), который использует display: flex и flex-direction: column для вертикального расположения элементов. Дети (child) будут автоматически размещены вертикально друг под другом.

Вариант 2: Использование сторонней библиотеки
Если вам нужно более сложное управление расположением элементов или вам нужно использовать какие-то другие функции, вы можете воспользоваться сторонней библиотекой, такой как react-grid-layout или react-flexbox-grid. Они предоставляют множество готовых компонентов и стилей для работы с раскладкой и позиционированием элементов.

Пример:

import { Grid, Row, Col } from 'react-flexbox-grid';

const MyComponent = () => {
  return (
    <Grid fluid>
      <Row>
        <Col xs={12} className="child">Див 1</Col>
      </Row>
      <Row>
        <Col xs={12} className="child">Див 2</Col>
      </Row>
    </Grid>
  );
};

В этом примере мы используем компоненты Grid, Row и Col из react-flexbox-grid, чтобы создать гибкую сетку. Мы также указываем xs={12}, чтобы дать каждому диву ширину на всю доступную область. Элементы автоматически располагаются вертикально друг под другом в зависимости от размеров контейнера.

В зависимости от ваших конкретных потребностей и предпочтений, вы можете выбрать один из этих способов или использовать собственное решение с помощью стилей CSS.