Блог

Главная - Вопросы по программированию - установка родительского div на flex, но не получение дочерних компонентов для рендеринга как таковых

установка родительского div на flex, но не получение дочерних компонентов для рендеринга как таковых

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

Привет всем, в настоящее время я работаю над проектом React, и моя главная проблема заключается в том, что я не могу заставить дочерние элементы div — которые в данном случае являются импортированными компонентами — отображаться как flex.

Есть ли другой подход к такого рода вещам в React по сравнению с традиционным способом или я делаю что-то не так?

В результате divs выводятся в виде блочных элементов шириной 30% вместо того, чтобы располагаться бок о бок.

Мой код показан ниже;

JSX:

 <div ClassName="selectClientContainer">
  <SelectClient />
  <SelectClient />
  <SelectClient />
  <SelectClient />
  <SelectClient />
</div>

CSS — код:

 .selectClientContainer {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

.selectClient {
  width: 30%;
  margin: 20px;
}

.selectClient img {
  display: block;
  width: 80%;
  margin: auto;
  border-radius: 50%;
}

Спасибо за помощь!

Комментарии:

1. Если я не ошибаюсь, направление сгибания по умолчанию в react равно column . Измените его на flex-direction: row

2. ^ Значение по умолчанию flex-direction в обычном HTML / CSS на самом деле row , и я ожидаю того же в react.js — а почему там должно быть по-другому?

Ответ №1:

Вы написали букву «С» с заглавной буквы при назначении className буквы «а», чтобы она оставалась незамеченной. Измените его на <div className="selectClientContainer"> , и он будет работать.

Метки: