如何在两个不同的列中显示地图的结果答案

【问题标题】：How to display result of map in two different columns如何在两个不同的列中显示地图的结果
【发布时间】：2021-06-07 01:49:31
【问题描述】：

我有一个任务，但我无法在 reactjs 中找到它的解决方案。我想在两列中显示结果，例如：所以每个下一个元素都应该添加到第二列中，但第一列应该限制为 2 行。

item 1 | item 4
item 2 | item 5
       | item 6

当我遍历数组时，列被分成相等的顺序，但正如您在图中看到的，我需要以 2:3 的比例拆分它们。我在这里给出了我迄今为止尝试过的沙盒链接。

// Example class component
class Thingy extends React.Component {
  render() {
  const secondaryNav = [
    {
      title: "Games",
      name: ["Roadrash", "Prince of Persia", "Counter Strike"]
    },
    {
      title: "Resources",
      name: ["Images", "Videos", "E-books"]
    },
    {
      title: "Shop",
      name: ["Shop now"]
    },
    {
      title: "Account",
      name: ["Log In", "Register"]
    },
    {
      title: "Support",
      name: ["Email", "Call Us", "Get a callback"]
    }
  ];
    return (
      <div className="App">
      <div className="container">
        <div className="row">
          {secondaryNav.map((item, i) => {
            return (
              <div className="col-lg-6 col-md-6">
                <h3>{ item.title }</h3>
                <ul>
                  {item.name.map((items, i) => {
                    return <li>{items}</li>
                  })}
                </ul>
              </div>)
          })}
        </div>
      </div>
    </div>
    )
  }
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

SANDBOX

【问题讨论】：

标签： javascript css reactjs twitter-bootstrap

【解决方案1】：

您需要在其上添加 css，也可以根据需要对数组进行切片。

这是一段代码

<div className="row">
  {secondaryNavData.slice(0, 2).map((item, i) => {
    return (
      <div className="col-lg-6 col-md-6">
        <h3>{item.title}</h3>
        <ul>
          {item.name.map((items, i) => {
            return <li>{items}</li>;
          })}
        </ul>
      </div>
    );
  })}
</div>
<div className="row-2">
  {secondaryNavData.slice(2, 5).map((item, i) => {
    return (
      <div className="col-lg-6 col-md-6">
        <h3>{item.title}</h3>
        <ul>
          {item.name.map((items, i) => {
            return <li>{items}</li>;
          })}
        </ul>
      </div>
    );
  })}
</div>

试试这个基于你的代码框以获得完整的 CSS 代码 https://codesandbox.io/s/elegant-grass-nmeux

【讨论】：

【解决方案2】：

slice 可以帮助我们在(0,2) 和(2,5) 索引之间分割数组，因此我们可以映射div。对于这个用例，我们不需要来自引导程序的 row 类。也可以简单地将其替换为col。

更新了问题沙盒 - https://codesandbox.io/s/goofy-black-4m4ii?file=/src/styles.css

【讨论】：

抱歉不清楚。实际上，我还需要在第二列中添加每个新元素。
您能否在问题本身中更新这些要求？
是也更新了问题