Bootstrap - создание столбцов в React при рендеринге данных - PullRequest
Новая
       4

Bootstrap - создание столбцов в React при рендеринге данных

0 голосов
/ 10 апреля 2020

Я пытаюсь отобразить мои JSON данные в формате столбца bootstrap, в идеале у меня должно быть 3 элемента в каждой строке, с переносом на следующую строку. Прямо сейчас, это только один элемент в строке. Может ли кто-нибудь указать мне правильное направление с точки зрения того, что мне здесь не хватает?

Часть моего компонента: 

  let parksJsx = ''
  if (!parks) {
    parksJsx = 'loading...'
  } else {
    parksJsx = parks.map(park => (
      <Container key={park.Name}>
        <Row>
          <Col lg={4} className="park-data">
            <h5>{park.Name}</h5>
            <img src={park.Thumbnail}/>
            <li>Location: {park.Location}</li>
            <li>Est. {park.Established}</li>
            <li>Area: {park.Area}</li>
            <li>Recreation Visitors: {park['Recreation visitors']}</li>
            <p>{park.Description}</p>
            <br />
          </Col>
        </Row>
      </Container>
    ))
  }

  return (
    <div>
      <h2 className="header">All U.S. National Parks:</h2>
      <div className="park-container">
        {parksJsx}
      </div>
    </div>
  )

Текущий CSS: 

.park-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.park-data {
  flex: 0 1 auto;
}

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Измените свой код на это: 

let parksJsx = ''
if (!parks) {
  parksJsx = 'loading...'
} else {
  parksJsx = parks.map(park => (
    <Col key={park.name} lg={4} className="park-data">
      <h5>{park.Name}</h5>
      <img src={park.Thumbnail}/>
      <li>Location: {park.Location}</li>
      <li>Est. {park.Established}</li>
      <li>Area: {park.Area}</li>
      <li>Recreation Visitors: {park['Recreation visitors']}</li>
      <p>{park.Description}</p>
      <br />
    </Col>
  ))
}

return (
  <div>
    <h2 className="header">All U.S. National Parks:</h2>
    <div className="park-container">
      <Container>
        <Row>
          {parksJsx}
        </Row>
      </Container>
    </div>
  </div>
)

Проблема заключалась в том, что вы рендерили контейнер со строкой для каждого элемента парка вместо того, чтобы поместить все элементы парка в один контейнер со строкой.

Решение состояло в том, чтобы переместить контейнер с компонентами строк из отдельных элементов парка и поместить их вне карты парков.

Если бы я мог порекомендовать некоторое форматирование, я бы предложил вам реализовать свой компонент следующим образом : 

return (
  <div>
    <h2 className="header">All U.S. National Parks:</h2>
    <div className="park-container">
      {!parks ? 'loading...' :
        <Container>
          <Row>
            {parks.map(park => (
              <Col key={park.name} lg={4} className="park-data">
                <h5>{park.Name}</h5>
                <img src={park.Thumbnail}/>
                <li>Location: {park.Location}</li>
                <li>Est. {park.Established}</li>
                <li>Area: {park.Area}</li>
                <li>Recreation Visitors: {park['Recreation visitors']}</li>
                <p>{park.Description}</p>
                <br />
              </Col>
            ))}
          </Row>
        </Container>
      }
    </div>
  </div>
)

Тогда логи c намного легче читать сверху вниз.

0 голосов
/ 10 апреля 2020

Сначала вам нужно отделить функцию рендеринга для парка и оставить там только столбец с содержимым, затем вы можете попробовать рендерить все это в одну строку, и все будет работать нормально, потому что элемент Row имеет отображение: flex.

...