在每个间隔后有一个循环来改变卡片的样式

IT技术 javascript reactjs
2021-05-07 11:37:01

目前我有一个容器，它以特定模式保存我的图像，其中第 1 张和第 6 张卡片水平拉长，卡片 2 到 5 垂直拉长。到目前为止，所有这些图像都是硬编码的，但我想要一个 .map 函数来从我的后端获取数据。但问题是 .map 需要 1 个布局并复制它，但我希望它遵循我认为需要循环的特定模式。

CodeSandbox：https ://codesandbox.io/s/gallant-forest-vygnw ? file =/ src/App.js

代码：

<div className="container">
        <div className="row">
          {/* {posts &&
            posts.map((item) => ( */}
          <div className="col-md-6 col-sm-6">
            <div className="row">
              <div className="col-md-12">
                <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
              </div>
            </div>
            <div className="row">
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
            </div>
          </div>
          <div className="col-md-6 col-sm-6">
            <div className="row">
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
            </div>
            <div className="row">
              <div className="col-md-12">
                <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
              </div>
            </div>
          </div>
          {/* ))} */}
        </div>
      </div>
2个回答

尝试在地图中使用索引来自定义您想要的方式。

posts.map((item, idx) => (
          <div className={idx === 0 ? "col-md-12" : "col-md-6 col-sm-6"}>
            <img
              src={item?.src}
              alt={item?.caption}
              style={{ minHeight: "280px", objectFit: "cover" }}
            />
          </div>

Codesandbox https://codesandbox.io/s/sad-shannon-wkc28?file=/src/App.js

我不习惯在这个网站上提供帮助，但我可能会给你一个答案。

似乎您的“帖子”只有 3 个项目，因此映射到此不会让您拥有所需的 6 个图像。不管怎样，你说数据必须来自你的后端，所以我认为这只是一些测试数据。

我建议你通常使用 .map 但定义与 CSS 的差异。然后您可以轻松地选择映射的第一个和最后一个元素，如下所示：

container div:first-child div:first-child, container div:last-child div:last-child{
  //your css
}

但是当您使用 bootsrap 进行样式设置时，您需要翻译此方法的 bootstrap 类。我建议你换一个。.map 函数可以获得一个索引作为第二个参数。所以你可以做这样的事情：

posts.map(element, i => {yourcode} )

然后使用索引来了解它是三元表达式中的第一项还是最后一项：

i === 0 || i === posts.length ? your code for the first and last : normal code for the others

编辑：我在沙箱中尝试过，您的模式似乎存在问题，每个元素都不是独立的。每 3 个项目出现的 div 元素会搞砸使用地图的一切。我最好的结果是这样的：

return (
    <div className="App">
      <div className="container">
        <div className="row">
          
            {posts &&
            posts.map((item, i) => {  
              return (i+1)%4 === 0 || i===0 ?
          (
            <div className="col-md-6 col-sm-6">
              <div className="row">
          <div className={ i === 0 || i === (posts.length-1) ? "col-md-12" : "col-md-6 col-sm-6"}>
            <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
          </div>
        </div>
            </div>
          )
            : 
          (
            <div className="row">
          <div className={ i === 0 || i === (posts.length-1) ? "col-md-12" : "col-md-6 col-sm-6"}>
            <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
          </div>
        </div>)
          
         })} 
          
          
        </div>
      </div>
    </div>
  );

但我无法弄清楚如何处理这个父 div 来封装每 3 个元素。这是我还没有尝试过的建议：

  1. 创建一个将映射到有问题的 div 中的组件。
  2. 找到一种根据您的请求创建二维数组的方法，该数组中的每个数组由 3 个元素组成
  3. 使用您的组件映射二维数组。

第一个映射将映射到 2D 数组中的每个 Array，而第二个映射（在组件内）将映射到元素上。

其它你可能感兴趣的问题
上一篇在 Electron 中捆绑的 React 应用程序中使用 axios 的 API 调用返回 400 下一篇有多个module的名称仅在大小写 React 中有所不同