如何使用 React-Bootstrap 根据项目计数创建带有拼接的轮播项目

Posted 2023-05-08

【中文标题】如何使用 React-Bootstrap 根据项目计数创建带有拼接的轮播项目

【英文标题】：How to create carousel items with splice based on item count using React-Bootstrap

【发布时间】：2021-02-05 14:48:00

【问题描述】：

我正在尝试拼接，以便每个页面（活动和其他项目）显示 3 个项目。但这不起作用。有人可以帮忙吗？

下面是代码：

var Cards1= filter.splice(0, Math.ceil(filter.length / 3)).map( item => 
  return (
    <div class="cards">
    <div class="title">
    <h6><b>item.Name </b></h6>
    </div>
    <div class="des">
    <p> item.DescriptionEN</p>
    </div>
    </div>
  )
)
var Cards2= filter.splice(filter.length / 3).map( item => 
  return (
    <div class="cards">
    <div class="title">
    <h6><b>item.Name </b></h6>
    </div>
    <div class="des">
    <p> item.DescriptionEN</p>
    </div>
    </div>
  )
)
<div class="main">
<div id="inam" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card-deck">
Cards1
</div>
</div>
<div class="carousel-item">
<div class="card-deck">
Cards2
</div>
</div>

【问题讨论】：

您需要多少个轮播项目？我不确定您是要展示 2 个还是 3 个轮播商品。

每页 3 个轮播项目

我的关于代码不适用于 3 个项目。我真的很感激这里的任何帮助。我已经尝试了一切。没有任何作用

【参考方案1】：

请试试这个。

class App extends Component 
  constructor (props) 
    super(props)
    this.state = 
      filter: [
        
          name: "AAA",
          description: "BBB"
        
      ]
    
  

  renderCards = (cards) => (
    cards.map(item => (
      <div class="cards">
        <div class="title">
          <h6><b>item.name</b></h6>
        </div>
        <div class="des">
          <p>item.description</p>
        </div>
      </div>
    ))
  )

  getSeparatedArray = (array) => 
    const res = [];
    for (let i = 0; i < array.length; i += 3) 
        const temp = array.slice(i, i + 3);
        res.push(temp);
    
    return res;
  

  render () 
    const  filter  = this.state
    const cardsList = this.getSeparatedArray(filter)

    return (
      <div class="main">
        <div id="inam" class="carousel slide" data-ride="carousel" >
          <div class="carousel-inner">
            
              cardsList.map(cards => (
                <div class="carousel-item">
                  <div class="card-deck">
                    this.renderCards(cards)
                  </div>
                </div>
              ))
            
          </div>
        </div>
      </div>
    )
  

【讨论】：

非常感谢您的及时回复。这真的帮助了我。但唯一的问题是，如果我有 100 件物品/卡片，我可能无法做到这一点。而不是定义为 const 卡，这是我可以做的事情吗..？非常感谢您在这方面的帮助。

即使您拥有超过 100 个项目也没关系。让我更新一下答案，这样你就可以得到什么了。

我还想补充一点，通过上述解决方案，我在第一张幻灯片中获得 3 个项目，在后续幻灯片中获得 2 个项目。

假设过滤器数组长度为7。在这种情况下，当前逻辑将显示2、2、3项。

我刚刚又编辑了一遍。希望这是你需要的。