Блог

Я пытался совместить несколько компонентов в приложении React в стиле «mad-libs», и у меня возникли некоторые трудности. Вот изображение того, как выглядит ситуация, со стрелкой, показывающей желаемый результат. Либо мой код flexbox отключен, либо мой стиль для текстового поля пользовательского интерфейса материала неверен..

Я использовал Flexbox, чтобы выровнять два компонента, но теперь мне трудно изменить их положение, чтобы они соответствовали. Вот мой код реакции: (Отображение массива, в котором хранится история, заполненная обычным текстом и требующая ввода)

 return(<div className = "storyContainer">
         {storyList.map((regulartext, index) => (
           <div className = "Parent">
              <div className = "Child1">
                {regulartext}
              </div>
              <div className = "Child2">
               <TextField
                 id="standard-input"
                 label={listFillIns[index]}
                 margin="normal" />
               </div>
             </div>))}
          </div>)
 

И вот мой фрагмент CSS:

 .storyContainer{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.Parent{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}
 

По сути, то, что я пытаюсь здесь сделать, — это выстроить два дочерних компонента внутри родительского, а затем объединить родителей вместе. Конечный результат будет выровнен с сохраненным фрагментом текста {regulartext} , а затем каждый родительский Div выровнен, чтобы уменьшить ненужные новые строки в истории.

Есть какие-нибудь советы о том, как выстроить эти компоненты в ряд или найти лучший способ сделать это? Любая помощь будет очень признательна!!

https://codesandbox.io/s/weathered-thunder-i2nih?file=/src/index.js

Добавить align-items: center; в родительский класс

 .Parent {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-items: center;
}
 

попробуйте добавить align-items: flex-end к родительскому