Bootstrap - 在 React 中创建列，同时呈现数据答案

【问题标题】：Bootstrap - creating columns within React, while rendering dataBootstrap - 在 React 中创建列，同时呈现数据
【发布时间】：2020-07-23 11:04:56
【问题描述】：

我正在尝试以引导列格式呈现我的 JSON 数据，理想情况下，我每行有 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;
}

【问题讨论】：

标签： reactjs twitter-bootstrap flexbox

【解决方案1】：

将您的代码更改为：

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>
)

那么从上往下看逻辑就容易多了。

【讨论】：

谢谢！我有一种感觉，我必须将 Container 等从 else 语句中取出，然后将其移回。这成功了。

【解决方案2】：

首先你需要分离一个公园的渲染功能，只留下一个包含内容的列，然后你可以尝试在一行中渲染所有内容，它会正常工作，因为 Row 元素有一个 display: flex 。

【讨论】：